在客户端过滤 FullCalendar 事件答案

【问题标题】：Filtering FullCalendar events on client side在客户端过滤 FullCalendar 事件
【发布时间】：2016-01-28 07:52:35
【问题描述】：

我正在使用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>

我错过了什么？感谢您的帮助。

【问题讨论】：

为什么不能过滤 JSON 事件？您实际上遇到了什么问题？
问题是我无法使用此解决方案过滤 json 加载的事件，只能过滤新事件。每次我保存一个新事件时，过滤器都会正常工作，直到我重新加载页面并通过 JSON 获取事件。
仍然需要更多细节 - “此解决方案”与为您提供新事件的解决方案有什么区别？在制定解决方案之前，我们必须诊断出问题究竟是什么。
我明白了。感谢您的帮助！

标签： javascript jquery fullcalendar

【解决方案1】：

我找到了答案。我使用 .change() 进行过滤。我还从 .fullCalendar 中删除了“事件”和“事件渲染”以避免冲突。

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

【讨论】：