使用FullCalendar和removeEvents方法过滤事件

Question

我正在尝试使用FullCalendar来显示来自JSON提要的事件.它使用以下代码正常工作:

$(document).ready(function() {

// Initialize calendar
$('#calendar').fullCalendar({   
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    buttonText: {
        prev: 'Previous month',
        next: 'Next month'
    },
    columnFormat: {
        month: 'dddd'
    },
    editable: false,
    events: "events.json",
    disableDragging: true,                      
});

我正在尝试创建一个链接,使用removeEvents方法过滤事件(理想情况下,它将是一个选择菜单).当我使用该方法并传入ID时,该事件将被删除.文件说明:

idOrFilter也可以是一个过滤函数,它接受一个Event Object参数,如果应该删除则返回true.

我读到过滤器函数应该像jQuery的grep方法一样运行,但我不明白如何实现它.我开始写下面的内容,但我不确定如何继续.任何建议或例子将不胜感激!

...

$('#filter').click(function() {
     $('#calendar').fullCalendar ( 'removeEvents', filter(events) );
}

...

function filter (events) {
...
}

Answer 1

如果您使用的是select做到这一点,你需要联动的某种方式option在S select和日历事件.我已经让它们option的id与日历中的事件相匹配:

JavaScript(使用eventsfullCalendar 的属性):

events: [
    {
        id: 'event-1',
        title: 'Christmas Eve',
        start: '2010-12-24',
        allDay: true
    },
    {
        id: 'event-2',
        title: 'Christmas Day',
        start: '2010-12-25',
        allDay: true
    },
    {
        id: 'event-3',
        title: 'Boxing Day',
        start: '2010-12-26',
        allDay: true
    }
] 

您的事件源不必是数组,这仅适用于我创建的示例.

HTML:

<select id="filter">
    <option id="event-1">Christmas Eve</option>
    <option id="event-2">Christmas Day</option>        
    <option id="event-3">Boxing Day</option>        
</select>

现在,removeEvent正如您所描述的,该函数接受一个事件对象并返回一个布尔值,指示是否应该删除该事件:

function filter(event) {
    return $("#filter > option:selected").attr("id") === event.id;
}

filter如果在带有id的select下选择的选项filter的id与传递给它的事件的id匹配,则该函数的作用是返回true .只要它返回true或false,这个函数就可以是任何东西.

它的工作方式是,当你调用removeEvent并传递你的函数时,生活在日历上的每个事件都会传递给该函数,如果返回true,则删除该事件.

我做了一个工作示例(http://jsfiddle.net/andrewwhitaker/QMyFu/),其中还包括过滤函数和select元素的另一个示例.

希望有所帮助!