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

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

有关后台事件的详细信息，请参阅https://fullcalendar.io/docs/background-events 。 还有一个演示这里。

Answer 2

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

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

无需更改任何 JS 代码...检查此图像..