jquery - 使用 FullCalendar 和 removeEvents 方法过滤 onclick 事件

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 may also be a filter function that accepts one Event Object argument and returns true if it should be removed.

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

...

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

...

function filter (events) {
...
}

Answer 1

如果您使用 select 来完成此操作，则需要某种方式将 select 中的 option 与日历中的事件。我已将选项的 ID 与日历中的事件的 ID 相匹配:

JavaScript(使用 fullCalendar 的 events 属性):

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 函数接受一个事件对象并返回一个 bool 值，指示是否应删除该事件:

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

filter 函数的作用是，如果在 id filter 的 select 下选择的选项具有与传递给它的事件 ID 相匹配的 id，则返回 true 。这个函数实际上可以是任何东西，只要它返回 true 或 false。

它的工作原理是，当您调用 removeEvent 并传递函数时，日历上的每个事件都会传递给该函数，如果返回 true，则该事件是已删除。

我制作了一个工作示例 ( http://jsfiddle.net/andrewwhitaker/QMyFu/ )，其中还包括过滤器函数和选择元素的另一个示例。

希望有帮助!