lundi 17 avril 2017

Filter events in full Calendar using checkboxes eventRender

I'm filtering my events, using checkboxes and rerender when checking a checkbox.

Problem I'm having is that after implementing this working code I not able to select a period of time in my calendar (dragging a time slot isn't possible anymore)

This is the code I use. HTML checkboxes:

<div class="instructor_selector">
<div class="col-lg-1">
<input type="checkbox" name="instructorId" value="AA" checked>AA<br>
</div>
<div class="col-lg-1">
<input type="checkbox" name="instructorId" value="BB" checked>BB<br>
</div>
<div class="col-lg-1">
<input type="checkbox" name="instructorId" value="JJ" checked>JJ<br>
</div>
</div>

Script:

<script>
$('.instructor_selector').on('change',function(){
$('#calendar').fullCalendar('rerenderEvents');
});
</script>   

Full Calendar:

eventRender:  function(event, element) {
    var returnvalue = false;
    $("input[name=instructorId]:checked").each(function() {
        var result = this.value == event.instructorId;
        returnvalue = returnvalue || result;
        });
    return returnvalue;         
},

Full Calender does a "eventRender" when moving the mouse over the calendar. I think I need some extra condition in the full calender code. So my "filter"-code only runs when clicking on a checkbox. Problem with this code is that i can't click-drag-select a period in the fullcalendar.




Aucun commentaire:

Enregistrer un commentaire