Filtering onclick events using the FullCalendar method and removeEvents method

Question

I am trying to use FullCalendar to display my events from a JSON feed. It works fine with the following code:

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

I am trying to create a link that will filter events (ideally it would be a selection menu) using the removeEvents method. When I use the method and pass the identifier, the event is deleted. The documentation states:

idOrFilter can also be a filter function that takes a single argument from an event object and returns true if it should be removed.

I read that the filter function should work just like the jQuery grep method, but I don’t understand how to implement it. I started writing below, but I do not know how to proceed. Any suggestions or examples would be greatly appreciated!

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

Answer 1

If you use select to accomplish this, you will need some way to bind the option in select and events in the calendar. I made option ids that correspond to event ids in the calendar:

JavaScript (using the events fullCalendar property):

 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 } ] 

Your event source should not be an array, this is just for the example I created.

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> 

Now the removeEvent function, as you described, accepts one event object and returns a boolean value indicating whether to remove the event:

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

What the filter function does is return true if the option selected when choosing with id filter has an identifier corresponding to the identifier of the event that is passed to it. This function can really be anything if it returns true or false.

The way it works under the hood is that when you call removeEvent and pass in your function, each of the events residing on the calendar is passed to that function, and if true is returned, the event is deleted.

I made a working example ( http://jsfiddle.net/andrewwhitaker/QMyFu/ ), which also includes another example of a filter function and a select element.

Hope this helps!