lundi 16 novembre 2015

Filter events in full Calendar using checkboxes

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.




Aucun commentaire:

Enregistrer un commentaire