fullCalendarjs方法fullCalendar（'clientEvents'）返回重复事件 [英] fullCalendarjs method fullCalendar('clientEvents') returns duplicate events

问题描述

我使用 fullcalendar.io

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

  $（'。add-more-events'）。on（'click'，function（）{
 var myEventSourceUrl = // ...以某种方式获取事件源网址
 var eventSourceColor = // ...获取源代码的颜色
 var eventSource = {
 type：' GET'，
 url：myEventSourceUrl，
 color：eventSourceColor 
}; 
 $（'。my-calendar'）。fullCalendar（'addEventSource'，eventSource）; 
} 
  

同样，我动态 un 填充我的日历，由通过eventSource去除事件，如：

  $（'。remove-some-events'）。on （'click'，function（）{
 var myEventSourceUrl = // ...以某种方式获取事件源url 
 var eventSourceColor = // ...获取该源的颜色
 var eventSource = {
类型：'GET'，
 url：myEventSourceUrl，
 color：eventSourceColor 
}; 
 $（'。my-calendar'）。fullCalendar（'removeEventSource'，eventSource）; 
} 
  

到目前为止，这么好：视觉上，事件出现在日历中），&如预期的那样消失在日历中（无人居住）。也就是说，无论何时点击相关按钮。

---

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

伪代码看起来像：

  1。备份我的活动
 2.销毁我的日历
 3.创建&初始化新日历
 4.将备份的事件（参见步骤1）添加到新日历中
  

<所以我实现了上面的例子：

  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'）。

注意：似乎是在切换星期时发生的，但是不确定这一点，但它可能是不相关的。

---

资源：

• http://fullcalendar.io/docs/event_data/Event_Source_Object/
  
• http://fullcalendar.io/docs/event_data/removeEventSource/


• http://fullcalendar.io/docs/event_data/clientEvents/


• 
  
• JQuery完整日历 - 初始化后编辑日历视图

解决方案

clientEvents

检索FullCalendar在内存中的事件。

。 fullCalendar（'clientEvents'[，idOrFilter]） - > Array

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

您存储它，然后重新创建FC，然后添加每个事件的来源。但来源是网址，对于许多活动相同，所以您会得到重复的。

基本上你在做
$ b $ pre $ $（'。my-日历'）。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; //跳过这个事件源，我们已经添加了它
} else {
 hash [currentEventSourceUrl] = 1; //记得我们添加currentEventSourceUrl 
 remainingEventSources.push（currentEventSource）; 
} 
} else {
 //处理非url事件源
} 
} 
 return remainingEventSources; 
} 
  

使用此方法，例如：

  //获取所有事件源
 var allEventSources = []; 
 var arrayLengthClientEvents = clientEvents.length; 
 for（var i = 0; i< arrayLengthClientEvents; i ++）{
 allEventSources.push（clientEvents [i] .source）; 
} 
 
 //过滤掉重复的事件源
 var remainingEventSources = filterOutDuplicateEventSources（allEventSources）; 
  

另外

从技术上讲， t相信 clientEvents 是为了这样使用的。你真正需要的是一个 eventSources 方法。但它不存在（可能是一个很好的功能请求）。

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

I am using fullcalendar.io

I dynamically populate my calendar, by adding events via evenSources. Such as:

$('.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);
}

Likewise, I dynamically unpopulate my calendar, by removing events via eventSource. Such as:

$('.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);
}

So far, so good: visually, events are appearing in the calendar (populated), & disappearing in the calendar (unpopulated) as expected. That is, whenever I click on the relevant button.

---

At some point, I want to reinitialize my calendar & redisplay the events that were last present in my calendar (keep the last eventSources I suppose).

Pseudo code would look like:

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

So I implemented the above such as:

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] */
}

But for some reason, I get duplicated events when calling $('.my-calendar').fullCalendar('clientEvents').

Note: it seems to be happening when switching weeks, not sure about this though, it may be unrelated.

---

Resources:

• 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

解决方案

clientEvents

Retrieves events that FullCalendar has in memory.
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

So it returns an array of events.

You store it, recreate the FC and then add the source of each event. But the sources are URLs and the same for many events, so you get duplicates.

Basically you are doing

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

which will give you duplicates.

So to fix it, you could check for duplicates and not add them. Add the method below:

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

Use this method such as:

// 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 );

Alternatively

Technically, I don't believe that clientEvents is meant to be used that way. What you really need is an eventSources method. But it doesn't exist (might be a good feature request).

I would likely try to store the calendar's event source state outside of fullcalendar. You said you have buttons that turn things on and off, are these basically toggles? Is it possible to determine the state by simply querying your various controls? Something along those lines might be a better solution. Maybe.

这篇关于fullCalendarjs方法fullCalendar（'clientEvents'）返回重复事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！