使用FullCalendar过滤事件并将其添加回来

时间:2011-11-03 20:08:50

标签: jquery fullcalendar

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

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

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

我想显示/呈现用户在重新检查相应的框时没有重新加载整个页面和JSON源时隐藏的事件,但保留其他未经检查,删除的事件。

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

1 个答案:

答案 0 :(得分:2)

这是我用于我的应用的实现。我创建了一个自定义的EventManager对象,它保存了我所有事件的主数组。另外,我告诉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;
});