Question

I am having a problem with adding events back to the calendar after they have been removed with the removeEvent method.

I have a JSON object containing all of the calendar events a user should see. A list is populated with checkboxes to give the user the ability to show and hide events by category via the following code.

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

I would like to show/render the events that the user chose to hide when they re-check the appropriate box without reloading the whole page and JSON source but keep other events that are unchecked, removed.

is there a way to do this by using the same data I used to remove the events?
ie.
return event.subscription == value;

Answer 1

Here is the implementation I used for my app. I made a custom EventManager object that keeps a Master array of ALL my events. Separately, I tell fullCalendar which subset of those events to load in the calendar (using the ‘addEventSource’ and ‘removeEventSource’ methods).

Hopefully this helps! 🙂

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