Filtering FullCalendar events on client side

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.

Why can't you filter the JSON events? What issue are you actually running into? — Harris, Oct 28 '15 at 14:42
The problem is I can't filter the events loaded by json using this solution, only the new events. Every time I save a new event, the filters works fine until I reload the page and get the events by JSON. — GustavoR., Oct 29 '15 at 09:37
Still going to need more detail- what is the difference between "this solution" and the one that gives you new events? We have to diagnose what the issue actually _is_ before a solution can be made. — Harris, Oct 29 '15 at 14:08

score 2 · Accepted Answer · answered Nov 03 '15 at 13:17

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);
                }
            })
        }
    });
});
});

Filtering FullCalendar events on client side

1 Answers1