Question

我有一个使用fullcalendar.io生成的班次名单。

我正在关注并扩展本教程：How can I create an event based on pattern for calendar?

我的活动时间跨度超过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年的数据，无法防止这种情况变慢。

如果您有服务器组件，则可能需要考虑以较小的块提供数据。 documentation描述了如何执行此操作，但这是一个快速草图：

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

这会导致您的服务器收到如下的查询字符串：

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

然后，您可以在服务器端过滤日历数据，只返回start和end之间的数据。如果您可以将其作为SQL查询的一部分（假设您正在使用SQL数据库）而不是尝试在javascript数组中进行过滤，那么这通常会更有效。

在班次名单上加快fullcalendar.io

1 个答案: