在客户端过滤 FullCalendar 事件

Question

I'm using this answer to filter the events on client side.

It works very well for newer events, but I can't filter events loaded from the JSON.

Here is my JS code:

$(document).ready(function() {
    var idEspacoFisico=$('#seleciona option:selected').val();
    $("#calendar").fullCalendar({
        events: 'eventos/getEventos.json',//can't filter these
        eventRender: function eventRender( event, element, view ) {
            //from the answer.
            return ['0',event.espacoFisico].indexOf($('#seleciona option:selected').val()) >= 0
        },
        select: function(start, end){
            //When created here, I can use the the eventRender to filter.
        }
    });
    $('#seleciona').change(function(){
        $("#calendar").fullCalendar('rerenderEvents');
    });
});

And HTML:

<select class="form-control" id="seleciona">
    <option value="0">Selecione</option>
    <option value="1">LAB 1</option>
    <option value="2">LAB 2</option>
    ...
</select>

<div id="calendar"></div>

I miss something? Thanks for the help.

Answer 1

I found an answer. I used the .change() to do the filter. I also removed the 'event' and 'eventRender' from the .fullCalendar to avoid conflict.

$(document).ready(function() {
var idEspacoFisico=$('#seleciona option:selected').val();
$("#calendar").fullCalendar({
    select: function(start, end){
    ...
    }
});
$('#seleciona').change(function(){
    $("#calendar").fullCalendar('removeEvents');//remove the old filtered events
    var idEspacoFisico=$('#seleciona option:selected').val();//filter based on the select value
    $.ajax({
        type:"POST",
        url:'eventos/getEventos.json', //get events
        success: function(data){
            $.each(data,function(index,value){//for each event, I will compare the value with the filter, if true, render it.
                if(value.espacoFisico==idEspacoFisico){
                    $("#calendar").fullCalendar('renderEvent', value, true);
                }
            })
        }
    });
});
});