FullCalendar Event Filtering Example



This demo shows how to live-filter FullCalendar using two different JSON feeds. This is accomplished using an array as the eventSources value. One of the feeds accepts querystring parameters to dynamically build/filter events. The other feed always returns the same events.




We control the sources and parameters with check boxes. Each check box represents an event type. In the markup, we have #e1 and #e2 (for the 1st JSON feed, which uses querystring to build dynamic events) and #e3 (for the 2nd JSON feed):

<div class="e1Div">
    <input type="checkbox" checked="checked" name="e1" id="e1" />
    <label for="e1">Event Type 1</label>
</div>
<div class="e2Div">
    <input type="checkbox" checked="checked" name="e2" id="e2" />
    <label for="e2">Event Type 2</label>
</div>
<div class="e3Div">
    <input type="checkbox" checked="checked" name="e3" id="e3" />
    <label for="e3">Event Type 3</label>
</div>

The state of each checkbox determines what feeds we will pull back. So we build the JSON feed URLs and use them as the eventSources parameter for the fullCalendar (Instead of using events as the events source, we'll use eventSources since we have an array).

Then, attach a change event to #e1, #e2, and #e3 so that events are repulled every time a filter event occurs:

var curSource = new Array();
//first source uses querystring to determine what events to pull back
curSource[0] = '/hackyjson/cal?e1=' +  $('#e1').is(':checked') + '&e2='+ $('#e2').is(':checked');
//second source just returns all events
curSource[1] = '/hackyjson/anothercal/';
var newSource = new Array(); //we'll use this later

$(document).ready(function() {     
    $('#eventFilterCalendar').fullCalendar({
        eventSources: [curSource[0],curSource[1]],
        header: {
            left: '',
            center: 'prev title next',
            right: ''
        },
        theme:true,
        eventRender: function (event, element) {
            element.attr('href', 'javascript:void(0);');
        }
    });

    $("#e1, #e2, #e3").change(function() {
        //get current status of our filters into newSource
        newSource[0] = '/hackyjson/cal?e1=' +  $('#e1').is(':checked') + '&e2='+ $('#e2').is(':checked');
        newSource[1] = $('#e3').is(':checked') ? '/hackyjson/anothercal/' : '';

        //remove the old eventSources
        $('#eventFilterCalendar').fullCalendar('removeEventSource', curSource[0]);
        $('#eventFilterCalendar').fullCalendar('removeEventSource', curSource[1]);
        $('#eventFilterCalendar').fullCalendar('refetchEvents');

        //attach the new eventSources
        $('#eventFilterCalendar').fullCalendar('addEventSource', newSource[0]);
        $('#eventFilterCalendar').fullCalendar('addEventSource', newSource[1]);
        $('#eventFilterCalendar').fullCalendar('refetchEvents');

        curSource[0] = newSource[0];
        curSource[1] = newSource[1];
    });
});

Questions? Comments? Leave them on the original blog post.