Question

我正在尝试使用FullCalendar来显示来自JSON Feed的事件。它使用以下代码正常工作：

$(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中的select与日历中的事件相关联。我已经使option的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函数接受一个事件对象并返回一个布尔值，指示是否应该删除该事件：

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

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

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

我做了一个工作示例（http://jsfiddle.net/andrewwhitaker/QMyFu/），其中还包含了另一个过滤函数和select元素的示例。

希望有所帮助！

使用FullCalendar和removeEvents方法过滤事件

1 个答案: