javascript - Fullcalendar change background color for holidays - Stack Overflow

admin管理员组

文章数量:1429623

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

Share Improve this question Follow edited Feb 11, 2020 at 14:46 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Feb 11, 2020 at 13:04 Giuseppe Lodi RizziniGiuseppe Lodi Rizzini 1,0551414 silver badges4444 bronze badges 8

• 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

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

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

本文标签： javascriptFullcalendar change background color for holidaysStack Overflow