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 event. After fullcalendar is ready, I want to dynamic filter events with "select".

I add "select" element on page like this:

<select id='school_selector'>       <option value='all'>All schools</option>       <option value='1'>school 1</option>       <option value='2'>school 2</option> </select> 

And in javascript code I add:

jQuery("#school_selector").change(function(){     filter_id = $(this).val();     if (filter_id != 'all') {         var events = $('#mycalendar').fullCalendar( 'clientEvents', function(event) {         if((filter_id == 'all') ) {             return true;         }else{                 //what I need to write here to dynamic filter events on calendar?         });     }  }); 

But it's does not work. Any help will be great.thanks.

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>  <script src="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.js"></script>  <link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.css" />    <select id="school_selector">    <option value="all">All</option>    <option value="1">School 1</option>    <option value="2">School 2</option>  </select>    <div id="mycalendar"></div>

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.