fullCalendarjs 方法 fullCalendar('clientEvents') 返回重复事件

Question

我正在使用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') 时收到重复事件。

注意：切换周时似乎会发生这种情况，但不确定，可能无关。

---

资源：

• When using jquery fullCalendar, Why am i seeing duplicate events after switching months?
• http://fullcalendar.io/docs/event_data/Event_Source_Object/
• http://fullcalendar.io/docs/event_data/removeEventSource/
• http://fullcalendar.io/docs/event_data/clientEvents/
• filtering events with clientEvents method on fullCalendar
• JQuery Full Calendar - edit calendar view after initialization

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 方法。但它不存在（可能是一个很好的feature request）。

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