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

$(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,});

...

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

...

function filter (events) {
...
}

如果您使用选择来完成此操作,则需要某种方式来关联选择中的选项和日历中的事件.我已经让选项的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',{
        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过滤器的SELEct下选择的选项的id与传递给它的事件的id匹配,则过滤器函数的作用是返回true.只要它返回True或false,这个函数就可以是任何东西.

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

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

希望有所帮助！