jquery fullcalendar 事件过滤 [英] jquery fullcalendar event filtering

问题描述

是否有任何方法可以在 fullcalendar 中动态过滤客户端事件?当我从服务器(json_encoded)获取事件时，我将自己的参数school_id"分配给每个事件.fullcalendar 准备好后，我想用select"动态过滤事件.

Is there any method to dynamic filter events on client side in fullcalendar? When I get events from server (json_encoded) I assign my own parameter "school_id" to every event. After fullcalendar is ready, I want to dynamic filter events with "select".

我在页面上添加选择"元素，如下所示:

I add "select" element on page like this:

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

在 javascript 代码中我添加:

And in javascript code I add:

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

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

But it's does not work. Any help will be great.thanks.

推荐答案

从 fullCalendar 版本 2 开始，您可以使用 eventRender 回调以有选择地呈现事件.将此与对 onChange 处理程序中的 rerenderEvents 方法的调用结合起来，您的事件应该会自动更新基于所选选项.

Since version 2 of fullCalendar you can use the eventRender callback to selectively render an event. Combine this with a call to the rerenderEvents method in your onChange handler, and your events should automatically update based on the selected option.

$('#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 并且事件将显示.否则在渲染时会被跳过.

Above, if the SELECT's value is either 'all' or matches the school property of the event object, your eventRender function will return true and the event will display. Otherwise it will be skipped during render.

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

This method is superior to passing filtering parameters to your event source, since that requires multiple round-trips to the server. You can load up all of your events at once and use eventRender to dynamically filter them at display time.

这篇关于jquery fullcalendar 事件过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！