Actually I use this code to set background red for holidays:

dayRender: function (dayRenderInfo) {

            var date = dayRenderInfo.date;

            var datestring = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);

            var cell = dayRenderInfo.el;



            var array_holidays = []

            $.ajax({
                type: "POST",
                async: false,
                dataType:"json",
                url: "ajax/get-holidays.php",
                data: { "anno" : date.getFullYear() },

                success: function(data, status) {

                    array_holidays = data;

                }
            });

            $.each( array_holidays , function( key, value ) {

              if ( datestring == value) {

                $(cell).css("background-color", "red");

              }

            });


        },

I need a script cause some holidays, for example easter, change dates every year. so, get-holidays.php, give me an array of holidays based on year actually shown in calendar.

It works great but, not very good as performance cause dayRender, in case of month view, is called 30-31 times!!!

Any suggest to get better performance?

Actually I use this code to set background red for holidays:

dayRender: function (dayRenderInfo) {

            var date = dayRenderInfo.date;

            var datestring = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);

            var cell = dayRenderInfo.el;



            var array_holidays = []

            $.ajax({
                type: "POST",
                async: false,
                dataType:"json",
                url: "ajax/get-holidays.php",
                data: { "anno" : date.getFullYear() },

                success: function(data, status) {

                    array_holidays = data;

                }
            });

            $.each( array_holidays , function( key, value ) {

              if ( datestring == value) {

                $(cell).css("background-color", "red");

              }

            });


        },

I need a script cause some holidays, for example easter, change dates every year. so, get-holidays.php, give me an array of holidays based on year actually shown in calendar.

It works great but, not very good as performance cause dayRender, in case of month view, is called 30-31 times!!!

Any suggest to get better performance?

• javascript
• fullcalendar
• fullcalendar-4

• getting rid of the deprecated, bad-practice async:false and moving the $.each inside the success function might help a bit, then at least the ajax calls can run in paralle. – ADyson Commented Feb 11, 2020 at 13:40
• But to be honest if all you're doing is setting the background colour, you'd be better off just creating a separate event source for these holidays whose events all have the `rendering: "background" option set. See fullcalendar.io/docs/background-events for details of that. You've been using fullCalendar for a while (I know, because you frequently post questions about it), so I'm surprised that idea didn't occur to you already. – ADyson Commented Feb 11, 2020 at 13:42
• @ADyson hi, no i don't need (i don't want) to use events for this purpose. I use this solution because I use the scheduler, grouped by resources. So i can't add events-holidays cause i need to duplicate (for example xmas) for every resource. I prefer set color on cell days for better view – Giuseppe Lodi Rizzini Commented Feb 11, 2020 at 14:11
• "i can't add events-holidays cause i need to duplicate (for example xmas) for every resource" ...nonsense. A single event can be associated to multiple resources. So you can still declare the event only once. See fullcalendar.io/docs/resources-and-events – ADyson Commented Feb 11, 2020 at 14:43
• 1 "I don't want to show it as event"...that's why I suggested to show it as a background event. i.e. it just colours in the cell. Did you even look at the link I gave you? There is a demo too: fullcalendar.io/docs/background-events-demo – ADyson Commented Feb 11, 2020 at 19:39

2 Answers 2

A better overall solution to this requirement is to create a separate event source for these holidays, whose events all have the rendering: "background" option set. This option will cause an event to simply colour in the background of the time period it covers, rather than showing up as a bold, labelled event in the normal way. You can of course also control the colour via the event's properties.

See https://fullcalendar.io/docs/background-events for details of background events. There's also a demo here.

you can do this very easily. Just define 'color'=>'' in your resource or event array list.

 $events[] = array(
                    '---' => '---',
                    '----'=> '----',
                    'color' => $color,     // optional ( it will work for Border Color or Background Color )
                   // 'className'=> '' // optional for give specific css
                );

No need to change any JS Code... Check this image..