在上班時間上加快fullcalendar.io

Question

我有一個使用fullcalendar.io生成的班次名冊。

我正在關注並擴展本教程： 如何基於日歷模式創建事件？

我的活動跨越了50年。

這使整個日歷變得漫長而沉重，而不是輕巧。 上一個/下一個按鈕很慢。 特別是對於dayClick回調，當在50年的時間內每周對所有創建的事件進行日期過濾時，事件需要花費幾秒鍾的時間才能執行。

我認為這是創作背后的邏輯。 當我縮短生成事件的時間時，整個過程會變得更快。

這是完整的插圖： https : //codepen.io/gunblaze/pen/OZKBvE 。

由於其過濾功能，一天點擊仍然是最慢的，我想：

..
dayClick: function(date, allDay, jsEvent, view) {
            $('#calendar').fullCalendar('clientEvents', function(event) {
                // match the event date with clicked date if true render clicked date events
                if(event.rendering == 'background'){
                    if (moment(date).format('YYYY-MM-DD') == event.start.format('YYYY-MM-DD')) {
            // do your stuff here
            $("#instructions").html(moment(date).format('YYYY-MM-DD')+': on ' +event.title+' shift.') 
                    }                   
                }
            });
}
..

Answer 1

您正在預先加載所有數據； 擁有50年的數據，沒有辦法阻止它變慢。

如果您有服務器組件，則可能需要考慮以較小的塊來提供數據。 該文檔描述了如何執行此操作，但是這里有一個簡單的草圖：

$('#calendar').fullCalendar({
  events: '/myfeed.php'
});

這將導致您的服務器收到如下查詢字符串：

/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381

然后，您可以在服務器端過濾日歷數據，僅返回start和end之間的數據。 如果您可以將其作為SQL查詢的一部分（假設您使用的是SQL數據庫）來進行操作，而不是嘗試在javascript數組中進行過濾，那么這樣做通常會更加高效。