CODEWITHSUNDEEP
jqueryjsonfullcalendar
MT3
MT3

Reputation: 1065

Filtering events onclick with FullCalendar and the removeEvents method

I'm trying to use FullCalendar to display my events from a JSON feed. It's working 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'm trying to create a link that'll filter the events (ideally, it would be a select menu) using the removeEvents method. When I use the method and pass in an ID, the event gets removed. The documentation states:

idOrFilter may also be a filter function that accepts one Event Object argument and returns true if it should be removed.

I read that the filter function should operate just like jQuery's grep method, but I don't understand how to implement it. I started writing the below, but I'm uncertain how to continue. Any suggestions or examples would be greatly appreciated! 

...

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

...

function filter (events) {
...
}

Upvotes: 4

Views: 12425

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

If you're using a select to accomplish this, you'll need some way of associating the options in the select and the events in the calendar. I've made the options have ids that match those of the events in the calendar:

JavaScript (using the events property of fullCalendar):

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 source of events does not have to 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, takes one event object and returns a boolean value indicating whether or not the event should be removed:

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

What the filter function does is return true if the option selected under the select with id filter has an id that matches the id of the event that is passed to it. This function can really be anything, as long as it returns true or false.

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

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

Hope that helps!

Upvotes: 6

Related Questions