jquery fullcalendar event filtering

user_837615 0
Viewed 49267

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.

fullcalendar filter events jquery
4 Answers
$("#searchbtnfilter").click(function(){

    var valfiltermots=$('#filtermots').val();
    var valfilterpar=$('#filterpar').val();
    var valfiltercategorie=$('#filtercategorie').val();
    var valfilterdate1=$('#filterdate1').val();
    var valfilterdate2=$('#filterdate2').val();
    var valfilterdepdepartevent=$('#filterdepdepartevent').val();
    var valfilterdeparriveevent=$('#filterdeparriveevent').val();

    $('#calendar').fullCalendar('removeEventSources');
    $('#calendar').fullCalendar('refetchEvents');
    var start_source1 = {
            type:'POST',
            data: {filtermots:valfiltermots,filterpar:valfilterpar,filtercategorie:valfiltercategorie,filterdate1:valfilterdate1,filterdate2:valfilterdate2,filterdepdepartevent:valfilterdepdepartevent,filterdeparriveevent: valfilterdeparriveevent},
            url: "<?php echo url_for('agenda/listeevent'); ?>"
    };
    $('#calendar').fullCalendar('addEventSource', start_source1);
});

the code need 

$('#calendar').fullCalendar('refetchEvents');

after

$('#calendar').fullCalendar('removeEventSources');

and add new event 

$('#calendar').fullCalendar('addEventSource', start_source1);
user_130083460
Related