jquery fullcalendar事件筛选

在fullcalendar中是否有动态筛选客户端事件的方法？ 当我从服务器json_编码获取事件时，我将自己的参数school_id分配给每个事件。 在fullcalendar就绪后，我想使用select动态筛选事件

我在页面上添加select元素，如下所示：

<select id='school_selector'>
      <option value='all'>All schools</option>
      <option value='1'>school 1</option>
      <option value='2'>school 2</option>
</select>

但这是行不通的。

---

任何帮助都会很好。谢谢

有解决办法。我希望这对其他人有所帮助

jQuery("#school_selector").change(function(){
    filter_id = $(this).val();
    if (filter_id == 'all') {
        $("#eventwrapper").fadeOut();
        $('#mycalendar').fullCalendar ('removeEvents');
        var start_source1 = {
                type:'POST',
                data: {school_id:'all',filter:'false'},
                url: '../../ajax/calendar/get_high_season_events.php',
                backgroundColor: 'red'
        };
        var start_source2 = {
                type:'POST',
                data: {school_id:'all',filter:'false'},
                url: '../../ajax/calendar/get_middle_season_events.php',
                backgroundColor: 'orange'
        };
        var start_source3 = {
                type:'POST',
                data: {school_id:'all',filter:'false'},
                url: '../../ajax/calendar/get_low_season_events.php',
                backgroundColor: 'green'
        };
        $('#mycalendar').fullCalendar('addEventSource', start_source1);
        $('#mycalendar').fullCalendar('addEventSource', start_source2);
        $('#mycalendar').fullCalendar('addEventSource', start_source3);
    }else{
        $("#eventwrapper").fadeIn();
        $('#mycalendar').fullCalendar ('removeEvents');
        var start_source1 = {
                type:'POST',
                data: {school_id:$("#school_selector").val(),filter:'true'},
                url: '../../ajax/calendar/get_high_season_events.php',
                backgroundColor: 'red'
        };
        var start_source2 = {
                type:'POST',
                data: {school_id:$("#school_selector").val(),filter:'true'},
                url: '../../ajax/calendar/get_middle_season_events.php',
                backgroundColor: 'orange'
        };
        var start_source3 = {
                type:'POST',
                data: {school_id:$("#school_selector").val(),filter:'true'},
                url: '../../ajax/calendar/get_low_season_events.php',
                backgroundColor: 'green'
        };
        $('#mycalendar').fullCalendar('addEventSource', start_source1);
        $('#mycalendar').fullCalendar('addEventSource', start_source2);
        $('#mycalendar').fullCalendar('addEventSource', start_source3);
    }//if

您可以设置对象，然后调用刷新事件。这样它就不会在你身上闪烁

eventData.data.filter1 = "searchcriteria1";
eventData.data.filter2 = "searchcriteria2";
$.fullcalendar('refetchEvents');

---

测试和验证。

自fullCalendar版本2以来，您可以使用回调有选择地呈现事件。将其与onChange处理程序中的方法调用相结合，事件将根据所选选项自动更新

$'mycalendar'.fullCalendar{ 活动：[ { 标题：“事件1”， 开始日期：“2015-05-01”， 学校：“1” }, { 标题：“事件2”， 开始日期：“2015-05-02”， 学校：'2' }, { 标题：“事件3”， 开始日期：“2015-05-03”， 学校：“1” }, { 标题：“事件4”， 开始日期：“2015-05-04”， 学校：'2' } ], eventRender：函数eventRender事件、元素、视图{ return['all'，event.school].indexOf$'school\u selector.val>=0 } }; $“学校选择器”。关于“更改”，函数{ $'mycalendar'.fullCalendar'rerenderEvents'； } 全部的 第一学校 学校2 之后

并添加新事件

$('#calendar').fullCalendar('addEventSource', start_source1);

---

这不是客户端过滤，是吗？？在每次选择之后，它们都将是一个ajax调用来获取过滤事件，或者我遗漏了什么？？Den Orlov我按照您的建议做了同样的事情，但仍然没有进展我也在努力更改选择，并且在应用您编写的内容后，它会起到一种效果！！：-谢谢你，很高兴听到@539。从本例中可以看出的一个关键事实是，eventRender会在渲染加载和缓存的事件之前对其进行过滤。因此，您不必加载其他事件来更改筛选条件。当然，您可以使eventRender中的条件尽可能复杂。

eventData.data.filter1 = "searchcriteria1";
eventData.data.filter2 = "searchcriteria2";
$.fullcalendar('refetchEvents');

$("#searchbtnfilter").click(function(){

    var valfiltermots=$('#filtermots').val();
    var valfilterpar=$('#filterpar').val();
    var valfiltercategorie=$('#filtercategorie').val();
    var valfilterdate1=$('#filterdate1').val();
    var valfilterdate2=$('#filterdate2').val();
    var valfilterdepdepartevent=$('#filterdepdepartevent').val();
    var valfilterdeparriveevent=$('#filterdeparriveevent').val();

    $('#calendar').fullCalendar('removeEventSources');
    $('#calendar').fullCalendar('refetchEvents');
    var start_source1 = {
            type:'POST',
            data: {filtermots:valfiltermots,filterpar:valfilterpar,filtercategorie:valfiltercategorie,filterdate1:valfilterdate1,filterdate2:valfilterdate2,filterdepdepartevent:valfilterdepdepartevent,filterdeparriveevent: valfilterdeparriveevent},
            url: "<?php echo url_for('agenda/listeevent'); ?>"
    };
    $('#calendar').fullCalendar('addEventSource', start_source1);
});

$('#calendar').fullCalendar('refetchEvents');

$('#calendar').fullCalendar('removeEventSources');

$('#calendar').fullCalendar('addEventSource', start_source1);