Fullcalendar 更改假期的背景颜色

Question

实际上我使用这段代码为假期设置红色背景：

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");

              }

            });


        },

我需要一个脚本，因为一些假期，例如复活节，每年都会更改日期。所以，get-holidays.php，根据日历中实际显示的年份给我一组假期。

效果很好，但由于性能原因，dayRender 在月视图中调用了 30-31 次！！！

任何获得更好性能的建议？

Answer 1

针对此要求的更好的整体解决方案是为这些假期创建一个单独的 event source，其事件都设置了 rendering: "background" 选项。此选项将使事件简单地在其涵盖的时间段的背景中着色，而不是以正常方式显示为粗体、标记的事件。您当然也可以通过事件的属性来控制颜色。

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

Answer 2

你可以很容易地做到这一点。只需在您的资源或事件数组列表中定义 'color'=>''。

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

无需更改任何 JS 代码... 检查这张图片..

Fullcalendar 更改假期的背景颜色

Fullcalendar change background color for holidays

javascript

fullcalendar

fullcalendar-4