27

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.

Den Orlov
  • 329
  • 1
  • 3
  • 6

4 Answers4

55

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.

okliv
  • 3,909
  • 30
  • 47
Andy Zarzycki
  • 2,601
  • 19
  • 10
  • 1
    I too was struggling with the changing of a `SELECT` and after applying what you've written it works a treat!! :-) Thanks – Jez May 05 '15 at 15:28
  • 2
    Great, good to hear @539. The crucial fact to take away from this example is that eventRender() *filters* the loaded (and cached) events *before* they're rendered. As a result you do not have to load additional events to change the criteria by which you filter. And, of course, you can make the condition in eventRender() as complex as you like. – Andy Zarzycki May 06 '15 at 19:39
5

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
Den Orlov
  • 329
  • 1
  • 3
  • 6
  • 4
    this is not client side filtering now, is it?? after every select, their will be an ajax call to fetch filtered events, or am i missing something ?? – Khizar Feb 13 '12 at 10:53
  • Den Orlov I did the same as you suggested but still no progress – nzy Feb 20 '15 at 09:36
3
var eventData = {
    type:'POST',
    data: {
    filter1: "",
    filter2: ""
    },
    url: '../../ajax/calendar/get_high_season_events.php',
    backgroundColor: 'red'
};

You can set the object then call the refresh event. That way it wont flicker on you.

eventData.data.filter1 = "searchcriteria1";
eventData.data.filter2 = "searchcriteria2";
$.fullcalendar('refetchEvents');

Test and proven.

Jonny
  • 31
  • 1
0
$("#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);
BlackNetworkBit
  • 768
  • 11
  • 21
cm b
  • 1