javascript - 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);
}

到目前为止，一切顺利:从视觉上看，事件出现在日历中(已填充)，并按预期在日历中消失(未填充)。也就是说，每当我点击相关按钮时。

<小时/>

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

伪代码如下所示:

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

Retrieves events that FullCalendar has in memory.
.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 之外。你说你有打开和关闭的按钮，这些基本上是切换吗？是否可以通过简单地查询各种控件来确定状态？沿着这些思路的东西可能是更好的解决方案。也许吧。