jquery fullcalendar event filtering

Solution 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.

Solution 2:

There is solution. I hope this help to someone else.

jQuery("#school_selector").change(function(){
    filter_id = $(this).val();
    if (filter_id == 'all') {
        $("#eventwrapper").fadeOut();
        $('#mycalendar').fullCalendar ('removeEvents');
        var start_source1 = {
                type:'POST',
                data: {school_id:'all',filter:'false'},
                url: '../../ajax/calendar/get_high_season_events.php',
                backgroundColor: 'red'
        };
        var start_source2 = {
                type:'POST',
                data: {school_id:'all',filter:'false'},
                url: '../../ajax/calendar/get_middle_season_events.php',
                backgroundColor: 'orange'
        };
        var start_source3 = {
                type:'POST',
                data: {school_id:'all',filter:'false'},
                url: '../../ajax/calendar/get_low_season_events.php',
                backgroundColor: 'green'
        };
        $('#mycalendar').fullCalendar('addEventSource', start_source1);
        $('#mycalendar').fullCalendar('addEventSource', start_source2);
        $('#mycalendar').fullCalendar('addEventSource', start_source3);
    }else{
        $("#eventwrapper").fadeIn();
        $('#mycalendar').fullCalendar ('removeEvents');
        var start_source1 = {
                type:'POST',
                data: {school_id:$("#school_selector").val(),filter:'true'},
                url: '../../ajax/calendar/get_high_season_events.php',
                backgroundColor: 'red'
        };
        var start_source2 = {
                type:'POST',
                data: {school_id:$("#school_selector").val(),filter:'true'},
                url: '../../ajax/calendar/get_middle_season_events.php',
                backgroundColor: 'orange'
        };
        var start_source3 = {
                type:'POST',
                data: {school_id:$("#school_selector").val(),filter:'true'},
                url: '../../ajax/calendar/get_low_season_events.php',
                backgroundColor: 'green'
        };
        $('#mycalendar').fullCalendar('addEventSource', start_source1);
        $('#mycalendar').fullCalendar('addEventSource', start_source2);
        $('#mycalendar').fullCalendar('addEventSource', start_source3);
    }//if