使用FullCalendar过滤事件并将它们添加回去

Question

我在使用removeEvent方法删除事件后将事件添加回日历时遇到问题。

我有一个JSON对象，包含用户应该看到的所有日历事件。列表中填充了复选框，以便用户能够通过以下代码按类别显示和隐藏事件。

var value = $(this).val(); 
$('#calendar').fullCalendar('removeEvents', function(event) { 
return event.subscription == value; 
}); 

我想显示/渲染用户选择隐藏，当他们再选中相应的框无需重新加载整个页面和JSON源，但保持是未经检查，去除其他事件的事件。

有没有办法通过使用我用来删除事件的相同数据来做到这一点？
即。 return event.subscription == value;

Answer 1

这是我用于我的应用程序的实现。我做了一个自定义的EventManager对象，它保存了我所有事件的Master数组。另外，我告诉fullCalendar要在日历中加载哪些事件子集（使用'addEventSource'和'removeEventSource'方法）。

希望这有助于！ :-)

EventManager = (function(){ 

    var rootEventSource = []; 
    var filteredEventSource = []; 

    return { 
     // Usage: EventManager.setSource([pass,event,array,here]); 
     setRootSource : function(events){ 
      rootEventSource = events; 
     }, 

     filterCalendar : function(filterFN){ 

      $("#calendar").fullCalendar('removeEventSource',filteredEventSource); 

      filteredEventSource = $.map(rootEventSource, function(event){ 
       filterFN(event); 
      }); 

      $("#calendar").fullCalendar('addEventSource', filteredEventSource); 
     } 
    }; 
})(); 

//In your fullcalendar init code: 
$("#calendar").fullCalendar({ 
    // init options 
    // go in here... 
    , events: function(start, end, callback) { 
     //get events from your server, etc... 
     events = some ajax function(start, end)... 

     //store the full set of events in our Event Manager 
     EventManager.setRootSource(events); 
     //pass fullcalendar an empty array 
     callback([]); 
    } 
}); 


//in your check/uncheck handler 
value = $(this).val(); 
EventManager.filterCalendar(function(event) { 
    return event.subscription == value; 
});