FullCalendar 仅获取当前未显示的事件

Question

我有一个使用 fullcalendar.io 的 Web 应用程序。我每天最多只有一个活动。我的问题是每次获取事件时，它都会获取所有事件，这会导致重新渲染当月的所有事件（至少）。我不想重新获取现有的（已经在客户端中的）事件！

为什么会这样？好吧，这很糟糕，因为 FullCalendar 已被编程，因此它将首先隐藏/删除客户端事件的显示，然后等到获取完成，然后重新呈现所有事件。这会导致几乎一秒钟的时间里，日历月在呈现事件之前显示为空。我希望它的行为方式是：日历应仅获取该可见月份中当前未显示的事件。然后当它返回时，它只会重新渲染那些新的事件。

我是如何实现它的：

      events: {
       data: function () {
         return {
           dynamic_value: JSON.stringify({myarray:$('#calendar').fullCalendar('clientEvents')})
         };
       },
       url: '/calendar/events',
     }

我试图做的是设置一个动态参数，我应该把所有客户端事件放在哪里。然后在服务器后端，我只会发回不包含在该参数中的事件。问题是，如果我在这个地方（在事件对象内）调用 fullCalendar('clientEvents')，它会导致一个空数组。那么如何给事件对象一个参数来指示它应该只获取新事件呢？还是我从一开始就走错了路？

Answer 1

即使我会找到一种方法（我确实做到了）将旧事件传递给 dynamic_value（参数），但这也无法解决真正的问题。

为什么会这样？这是因为我使用重新获取来显示事件。我查看了 FullCalendar 重新获取功能的底层，它首先从日历中删除所有事件，然后开始获取新事件。在 ajax 获取期间，日历将保持空白。因此，即使我将旧事件设置为参数，然后应用服务器端过滤，它也无济于事。

但是，幸运的是，我能够解决真正的问题。我继续获取所有事件（不过我将来可能会更改它），但我设法避免了这个问题。我所做的是我（再次）在引擎盖下查看。我意识到在 FullCalendar 中存在许多可通过 api 使用的未记录功能。其中之一是 fetchEvents 函数（由 refetchEvents 函数使用）。 fetchEvents 函数只进行获取，它不会删除任何旧事件。所以我所做的是，我没有使用 reFetchEvents，而是使用了：

      $('#calendar').fullCalendar(
        'fetchEvents',
        $('#calendar').fullCalendar('getView').start,
        $('#calendar').fullCalendar('getView').end
  );

fetchEvents 函数只需要 start 和 end 作为参数。我能够通过遵循 refetchEvents 函数如何使用 fetchEvents 函数来获得这些，并且他们从 getView 函数中获得了开始和结束。如上所示，我能够使用 getView 函数。

但这只是解决方案的一半。当然，我必须以某种方式在适当的地方删除旧的日历事件。好吧，为此，我很幸运地找到了一个可以通过 api 使用的函数（甚至没有记录）。我不得不更改我的 fullCalendar 中的事件部分配置。我没有使用简单的 json feed URL，而是将其更改为带有成功功能的 ajax 规范，这样我就可以在适当的地方销毁旧事件。所以现在销毁部分只发生在 ajax 响应之后，这将使销毁渲染过程更快：

      events: function(start, end, timezone, callback) {
        $.ajax({
          url: '/calendar/events',
          dataType: 'json',
          data: {
            start: start.unix(),
            end: end.unix()
          },
          success: function(doc) {
            var events = [];
            doc.forEach(function(eventObject) {
                events.push({
                    title: eventObject.title,
                    start: eventObject.start,
                    user: eventObject.user,
                    allDay: eventObject.allDay,
                    overlap: eventObject.overlap,
                    created: eventObject.created
                });
            });
            $('#calendar').fullCalendar('destroyEvents');
            callback(events);
        }
    });

}

正如您在上面看到的，我在发送新事件以渲染回调之前使用了 fullCalendar destroyEvents。这解决了ajax调用期间的空白日历。