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



我有一个使用fullcalendar.io的Web应用程序。我每天只有一个活动。我的问题是,每次获取事件时,都会获取所有事件,这将导致重新渲染本月所有事件(至少)。我不想(已经在客户端中)撤离现有事件!

为什么这不好?好吧,这很糟糕,因为完整的calendar被编程了,因此它将首先隐藏/删除客户端事件显示,然后等待直到获取完成,然后重新很多事。这导致了一个情况,即几乎一秒钟的时间,日历月在呈现事件之前就显示为空。我希望它的行为是:日历应仅获取当前在该月份中未显示的事件。然后,当它返回时,它只重新呈现新事件。

我如何尝试实现它是:

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

我试图做的是设置一个动态参数,我应该在其中放置所有客户端事件。然后在服务器后端中,我只会发送该参数中未包含的事件。问题是,如果我在此位置(事件对象内部)调用FullCalendar('ClientEvents'),则会导致一个空数组。那么,我该如何给事件对象一个参数,以表明它只能获取新事件呢?还是我从一开始就以错误的方式接近?

即使我会找到一种将旧事件传递到dynamic_value(参数)的方法(我确实确实如此),但它无法解决真正的问题。

为什么?这是因为我正在使用Refetching展示事件。我在FullCalendar恢复功能的引擎盖下看,它的作用是它首先从日历中删除了所有事件,此后,它开始获取新事件。在此期间,日历将保持空白。因此,即使我将旧事件设置为对讲机,然后应用了Serveride过滤也无济于事。

但是,幸运的是,我能够解决真正的问题。我继续进行所有事件(尽管我将来可能会更改它),但是我设法避免了问题。我做的是(再次)看着引擎盖。我意识到,在FullCalendar中存在许多通过API可用的未记录的功能。其中之一是Fetchevents函数(由Reftchevents函数使用)。获取函数仅进行提取,并且不会删除任何旧事件。所以我做的是我使用的是:

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

获取函数只需要作为参数的启动和结尾即可。我能够通过遵循Refetchevents功能如何使用FetcheVents函数来获得这些功能,并且它们从GetView函数中获得了启动和结尾。我能够使用如上所述的GetView函数。

这只是解决方案的一半。当然,我必须以适当的位置删除旧日历事件。好吧,为此,我很幸运也能找到可以通过API使用的功能(甚至没有记录)。我不得不在FullCalendar中更改事件部分配置。我将其更改为具有成功功能的Ajax规范,而不是简单的JSON提要URL,以便在适当的地方进行旧事件的破坏。因此,现在销毁部分仅在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 Destractent,以进行回调。这解决了Ajax呼叫期间的空白日历。

相关内容

  • 没有找到相关文章

最新更新