jquery fullcalendar事件过滤

@H_502_0@

在fullcalendar中是否有任何方法在客户端动态过滤事件？
当我从服务器(json_encoded)获取事件时,我将自己的参数“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>

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

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

解决方法

从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',{
            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’或与事件对象的school属性匹配,则eventRender函数将返回true并显示事件.否则在渲染期间将跳过它.

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

jquery fullcalendar事件过滤

解决方法

猜你在找的jQuery相关文章