Multiple filters usage in Fullcalendar 4.0 events
$('#mycalendar').fullCalendar({ defaultDate: '2015-05-01', events: [{ title: 'Event 1', start: '2015-05-01', school: '10', college: '1' }, { title: 'Event 2', start: '2015-05-02', school: '2', college: '1' }, { title: 'Event 3', start: '2015-05-03', school: '1', college: '1' }, { title: 'Event 4', start: '2015-05-04', school: '2', college: '2' } ], eventRender: function eventRender(event, element, view) { if ($('#currentAction').val() == 'school') { if ($('#school_selector').val() != 'all') return ['all', event.school].indexOf($('#school_selector').val()) >= 0 } if ($('#currentAction').val() == 'college') { if ($('#college_selector').val() != 'all') return ['all', event.college].indexOf($('#college_selector').val()) >= 0 } } }); $('#school_selector').on('change', function() { $('#currentAction').val('school'); $('#mycalendar').fullCalendar('rerenderEvents'); }) $('#college_selector').on('change', function() { $('#currentAction').val('college'); $('#mycalendar').fullCalendar('rerenderEvents'); })<head> <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' /> </head> <body> <div id='calendar'></div> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> <select id="school_selector"> <option value="all">All</option> <option value="1">School 1</option> <option value="2">School 2</option> <option value="10">School 10</option> </select> <select id="college_selector"> <option value="all">All</option> <option value="1">college 1</option> <option value="2">college 2</option> </select> <div id="mycalendar"></div> <span id="currentAction" name="currentAction" />I have multiple filters to be applied on fullcalendar events. Filter one is ‘Status’ and filter two is ‘NAME’. When I apply ‘Status’ filter using the logic in eventrender the month view shows only the selected ‘Status’ events, when I am trying to apply second filter ‘NAME’ with some other logic block in eventrender, it considers all events in month view irrespective of first ‘Status’ filter result. The reason for this is as I wrote code in eventrender for first ‘Status’ filter as, if the status of any event does not matches with my selected ‘Status’, I just returned false, so I did not apply any hiding or removing of event from the calendar, might be this is the reason the fullcalendar considers all events are valid for subsequent filtering. Please suggest.
I think this is what you are aiming for. You can test it best by selecting School 2, and then changing between College 1 and 2 (and All) and observing which events are shown and hidden.
Your problem was the "current_action" variable, which was causing only one filter to run at a time. The other if statements inside eventRender were also a problem because they would also stop the indexOf query (which contains the "all" option") from returning a useful result.
Once you’ve simplified it by removing all that noise, you can just combine the results of both the indexOf queries, and only display events which meet both conditions (i.e. they meet the criteria set by both the dropdowns).
$('#mycalendar').fullCalendar({ defaultDate: '2015-05-01', events: [{ title: 'Event 1', start: '2015-05-01', school: '10', college: '1' }, { title: 'Event 2', start: '2015-05-02', school: '2', college: '1' }, { title: 'Event 3', start: '2015-05-03', school: '1', college: '1' }, { title: 'Event 4', start: '2015-05-04', school: '2', college: '2' } ], eventRender: function eventRender(event, element, view) { var school = ['all', event.school].indexOf($('#school_selector').val()) >= 0; var college = ['all', event.college].indexOf($('#college_selector').val()) >= 0; return (school && college); } }); $('#school_selector').on('change', function() { $('#mycalendar').fullCalendar('rerenderEvents'); }) $('#college_selector').on('change', function() { $('#mycalendar').fullCalendar('rerenderEvents'); })<head> <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' /> </head> <body> <div id='calendar'></div> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> <select id="school_selector"> <option value="all">All</option> <option value="1">School 1</option> <option value="2">School 2</option> <option value="10">School 10</option> </select> <select id="college_selector"> <option value="all">All</option> <option value="1">College 1</option> <option value="2">College 2</option> </select> <div id="mycalendar"></div>
