fullCalendarjs方法fullCalendar（’clientEvents’）返回重复事件

我正在使用fullcalendar.io

我通过evenSources添加事件来动态填充我的日历。 如：

$('.add-more-events').on('click', function(){ var myEventSourceUrl = // ... get the event source url somehow var eventSourceColor = // ... get the color for this source var eventSource = { type: 'GET', url: myEventSourceUrl, color: eventSourceColor }; $('.my-calendar').fullCalendar('addEventSource', eventSource); } 

同样，我通过eventSource 删除事件，动态地取消填充我的日历。 如：

 $('.remove-some-events').on('click', function(){ var myEventSourceUrl = // ... get the event source url somehow var eventSourceColor = // ... get the color for this source var eventSource = { type: 'GET', url: myEventSourceUrl, color: eventSourceColor }; $('.my-calendar').fullCalendar('removeEventSource', eventSource); } 

到目前为止，非常好：视觉上，事件出现在日历中（已填充），并且按预期消失在日历中（未填充）。 也就是说，每当我点击相关按钮。

---

在某些时候，我想重新初始化我的日历并重新显示我日历中最后出现的事件（保留我认为的最后一个eventSources）。

伪代码看起来像：

 1. Back up my events 2. Destroy my calendar 3. Create & initialize new calendar 4. Add the backed up events (see step 1) to the new calendar 

所以我实现了以上如下：

 var clientEvents = $('.my-calendar').fullCalendar('clientEvents'); /* [1] */ $('.my-calendar').fullCalendar('destroy'); /* [2] */ $('.my-calendar').fullCalendar(calendarOptions); /* [3] */ var arrayLengthClientEvents = clientEvents.length; for (var i = 0; i < arrayLengthClientEvents; i++) { $('.my-calendar').fullCalendar( 'addEventSource', clientEvents[i].source); /* [4] */ } 

但由于某些原因，我在调用$('.my-calendar').fullCalendar('clientEvents')时会遇到重复事件。

注意：这似乎是在转换周数时发生的，虽然不确定，但它可能是无关的。

---

资源：

• 使用jquery fullCalendar时，为什么我在切换月份后会看到重复的事件？
• http://fullcalendar.io/docs/event_data/Event_Source_Object/
• http://fullcalendar.io/docs/event_data/removeEventSource/
• http://fullcalendar.io/docs/event_data/clientEvents/
• 使用fullCalendar上的clientEvents方法过滤事件
• JQuery完整日历 – 初始化后编辑日历视图

Answer 1

clientEvents

检索FullCalendar在内存中的事件。
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

所以它返回一个事件数组。

您存储它，重新创建FC，然后添加每个事件的来源。 但是源是URL，并且对于许多事件都是相同的 ，所以你得到了重复。

基本上你在做

 $('.my-calendar').fullCalendar('addEventSource', {url:"/myfeed"}); $('.my-calendar').fullCalendar('addEventSource', {url:"/myfeed"}); 

这将给你重复。

因此，要修复它，您可以检查重复项而不是添加它们。 添加以下方法：

 var filterOutDuplicateEventSources = function(allEventSources){ var hash = {}; var remainingEventSources = []; var arrayLength = allEventSources.length; for (var i = 0; arrayLength !== 0 && i < arrayLength; i++) { var currentEventSource = allEventSources[i]; var currentEventSourceUrl = currentEventSource.url; if(currentEventSourceUrl){ if(hash[currentEventSourceUrl] === 1){ continue; //skip this event source, we've already added it }else{ hash[currentEventSourceUrl] = 1; // remember that we add this currentEventSourceUrl remainingEventSources.push(currentEventSource); } }else{ //handle non-url event sources } } return remainingEventSources; } 

使用此方法，例如：

 // Get all event sources var allEventSources = []; var arrayLengthClientEvents = clientEvents.length; for (var i = 0; i < arrayLengthClientEvents; i++) { allEventSources.push( clientEvents[i].source ); } // Filter out duplicated event sources var remainingEventSources = filterOutDuplicateEventSources( allEventSources ); 

另外

从技术上讲，我不相信clientEvents应该以这种方式使用。 你真正需要的是一个eventSources方法。 但它不存在（可能是一个很好的function请求 ）。

我可能会尝试将日历的事件源状态存储在fullcalendar之外。 你说你有按钮可以打开和关闭这些东西，这些基本上都是切换的吗？ 是否可以通过简单查询各种控件来确定状态？ 这些方面的东西可能是更好的解决方案。 也许。