Fullcalendar change background color for holidays

Question

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?

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, Feb 11 '20 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](https://fullcalendar.io/docs/eventSources) for these holidays whose events all have the `rendering: "background" option set. See https://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, Feb 11 '20 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, Feb 11 '20 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 https://fullcalendar.io/docs/resources-and-events — ADyson, Feb 11 '20 at 14:43
@ADyson yes i know, but I don't want to show it as event...i'll try your first solution with ajax — Giuseppe Lodi Rizzini, Feb 11 '20 at 16:07
"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: https://fullcalendar.io/docs/background-events-demo — ADyson, Feb 11 '20 at 19:39
@ADyson hi thankyou, I confused it with another one. This is a good solution for me. thanks — Giuseppe Lodi Rizzini, Feb 12 '20 at 08:00
No problem. After all this time of using fullCalendar I am surprised you are not more familiar with the features, though. — ADyson, Feb 12 '20 at 08:59

score 3 · Accepted Answer · answered Feb 12 '20 at 09:58

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.

score 0 · Answer 2 · answered Oct 19 '21 at 06:52

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..

Fullcalendar change background color for holidays

2 Answers2