Question

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

为什么这么糟糕？好吧，这很糟糕，因为FullCalendar被编程，以便它首先隐藏/删除客户端事件显示，然后等待提取完成，然后重新呈现所有事件。这导致在几乎一秒钟的时间内，日历月在呈现事件之前显示为空的情况。我希望它的表现如下：日历应该只获取当前未在该可见月份显示的事件。然后当它返回时，它只重新渲染那些新的事件。

我是如何实现这一目标的：

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

我尝试做的是设置动态参数，我应该放置所有客户端事件。然后在服务器后端，我只会发回不包含在该参数中的事件。问题是，如果我在这个地方（在events对象内）调用fullCalendar（'clientEvents'），它会导致一个空数组。那么我怎么能给events对象一个参数来表明它应该只获取新的事件呢？或者我从一开始就以错误的方式接近这个？

Answer 1

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

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

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

而不是使用reFetchEvents

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

fetchEvents函数只需要以paramaters开头和结尾。我能够通过跟踪refetchEvents函数如何使用fetchEvents函数来获取它们，并且它们从getView函数获得了开始和结束。我能够使用如上所示的getView函数。

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

      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呼叫期间的空白日历。

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

1 个答案: