jquery fullcalendar event filtering

Question

Is there any method to dynamic filter events on client side in fullcalendar? When I get events from server (json_encoded) I assign my own parameter \"school_id\" to every ev

Answer 1

Since version 2 of fullCalendar you can use the eventRender callback to selectively render an event. Combine this with a call to the rerenderEvents method in your onChange handler, and your events should automatically update based on the selected option.

$('#mycalendar').fullCalendar({
    events: [
        {
            title: 'Event 1',
            start: '2015-05-01',
            school: '1'
        },
        {
            title: 'Event 2',
            start: '2015-05-02',
            school: '2'
        },
        {
            title: 'Event 3',
            start: '2015-05-03',
            school: '1'
        },
        {
            title: 'Event 4',
            start: '2015-05-04',
            school: '2'
        }
    ],
    eventRender: function eventRender( event, element, view ) {
        return ['all', event.school].indexOf($('#school_selector').val()) >= 0
    }
});

$('#school_selector').on('change',function(){
    $('#mycalendar').fullCalendar('rerenderEvents');
})
  

  All
  School 1
  School 2

Above, if the SELECT's value is either 'all' or matches the school property of the event object, your eventRender function will return true and the event will display. Otherwise it will be skipped during render.

This method is superior to passing filtering parameters to your event source, since that requires multiple round-trips to the server. You can load up all of your events at once and use eventRender to dynamically filter them at display time.