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 代碼...檢查此圖像..