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?

Answer 1

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.