在客戶端過濾FullCalendar事件

Question

我使用this answer來過濾客戶端的事件。

它適用於較新的事件，但我無法過濾從JSON加載的事件。

這裏是我的JS代碼：

$(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'); 
    }); 
}); 

和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> 

我錯過了什麼？ 感謝您的幫助。

Answer 1

我找到了答案。我使用.change（）來完成過濾器。 我也從.fullCalendar中刪除了'event'和'eventRender'以避免衝突。

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