jquery fullcalendar 事件过滤

Posted 2023-02-27

【中文标题】jquery fullcalendar 事件过滤

【英文标题】：jquery fullcalendar event filtering

【发布时间】：2011-10-02 06:01:58

【问题描述】：

是否有任何方法可以在全日历中动态过滤客户端的事件？ 当我从服务器（json_encoded）获取事件时，我将自己的参数“school_id”分配给每个事件。 fullcalendar 准备好后，我想用“select”动态过滤事件。

我在页面上添加“选择”元素，如下所示：

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

我在 javascript 代码中添加：

jQuery("#school_selector").change(function()
    filter_id = $(this).val();
    if (filter_id != 'all') 
        var events = $('#mycalendar').fullCalendar( 'clientEvents', function(event) 
        if((filter_id == 'all') ) 
            return true;
        else
                //what I need to write here to dynamic filter events on calendar?
        );
    
 );

但它不起作用。 任何帮助都会很棒。谢谢。

【参考方案1】：

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

【参考方案2】：

从 fullCalendar 第 2 版开始，您可以使用 eventRender 回调有选择地呈现事件。将此与 onChange 处理程序中对 rerenderEvents 方法的调用相结合，您的事件应根据所选选项自动更新。

$('#mycalendar').fullCalendar(
    events: [
        
            title: 'Event 1',
            start: '2015-05-01',
            school: '1'
        ,
        
            title: 'Event 2',
            start: '2015-05-02',
            school: '2'
        ,
        
            title: 'Event 3',
            start: '2015-05-03',
            school: '1'
        ,
        
            title: 'Event 4',
            start: '2015-05-04',
            school: '2'
        
    ],
    eventRender: function eventRender( event, element, view ) 
        return ['all', event.school].indexOf($('#school_selector').val()) >= 0
    
);

$('#school_selector').on('change',function()
    $('#mycalendar').fullCalendar('rerenderEvents');
)
  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.css" />

<select id="school_selector">
  <option value="all">All</option>
  <option value="1">School 1</option>
  <option value="2">School 2</option>
</select>

<div id="mycalendar"></div>

如上，如果 SELECT 的值是 'all' 或与 event 对象的 school 属性匹配，您的 eventRender 函数将返回 true 并显示事件。否则在渲染过程中会被跳过。

此方法优于将过滤参数传递给事件源，因为这需要多次往返服务器。您可以一次加载所有事件并使用 eventRender 在显示时动态地过滤它们。

【讨论】：

我也在为更改SELECT 而苦苦挣扎，在应用了您所写的内容后，它会奏效！ :-) 谢谢

太好了，很高兴听到@539。从这个例子中得出的关键事实是 eventRender() 过滤加载的（和缓存的）事件在渲染之前。因此，您不必加载其他事件来更改过滤条件。当然，您可以根据自己的喜好使 eventRender() 中的条件变得复杂。

【参考方案3】：

var eventData = 
    type:'POST',
    data: 
    filter1: "",
    filter2: ""
    ,
    url: '../../ajax/calendar/get_high_season_events.php',
    backgroundColor: 'red'
;

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

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

测试和证明。

【参考方案4】：

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

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

【讨论】：

这不是客户端过滤，是吗？在每次选择之后，它们将是一个 ajax 调用来获取过滤事件，或者我错过了什么？？

Den Orlov 我按照你的建议做了同样的事情，但仍然没有进展