jQuery FullCalendar Event Filtering Example

9/9/2014:  Demo updated to FullCalendar 2.1.1.
1/6/2013:  Demo updated to include filtering from a 2nd JSON feed.

Everytime I go looking for a good calendar system for one of my sites, I'm surprised on how much ISN'T out there. My favorite option right now is FullCalendar, a jQuery plugin. It's easy to use, has good features, and is customizable.

I ran into some problems trying to show/hide event types when the source is a single JSON feed, so I'm providing an example, in case you are having a similar problem!

The first step is to build the JSON feed. If you are interested in how I built the filterable feed in C#, please visit the post Create FullCalendar JSON Feed in C#. The FullCalendar site has good examples on how your JSON feed should appear.

I wanted the user to be able to show/hide the events from each feed. This wasn't really covered anywhere. So here is how.

VIEW THE DEMO to see a live example of the code below.

The source for all events are pulled from a JSON feed, determined by the state of the two check boxes (each check box represents an event type):

var source = '/feeds/calendarjson.ashx?e1=' + 
    $('#e1').is(':checked') + '&e2='+ 
    $('#e2').is(':checked');

View JSON feed. Generating this is up to you. As you can see, mine uses the values of the querystring to determine what events it will put in the feed. View C# code. Want the node.js code? Let me know in the comments!

When the page is loaded, the source is set (above) and then the calendar is loaded (in this example, I'm clearing out the href of each event):

function loadCal() {
    $('#calendar').fullCalendar({
        events: source,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        eventRender: function (event, element)
        {
            element.attr('href', '#');
        }
    });
}

Each checkbox has a click event, which causes the calendar to reload (newSource is another variable set at the same time I set source, to the same value):

function reloadCal() {
    newSource = '/feeds/calendarjson.ashx?e1=' + $('#e1').is(':checked')
        + '&e2=' + $('#e2').is(':checked');
    $('#calendar').fullCalendar('removeEventSource', source)
    $('#calendar').fullCalendar('refetchEvents')
    $('#calendar').fullCalendar('addEventSource', newSource)
    $('#calendar').fullCalendar('refetchEvents');
    source = newSource;
}

Happy Coding.