Pulling Data for next/prev months

Question

I am pulling my Fullcalendar data for the month that is being viewed. When I click on the Next/Prev Month view buttons it doesn't go out and fetch the new data for the new month.

How do I get the Next/Prev buttons to make another call to the DB and pull records for that month?

Answer 1

Define an events callback to make an ajax request to your api. See the docs here. Here's an example integrating with my api that uses epoch start and end as get parameters in the lookups.

$('#calendar').fullCalendar({
    // other options here...

    events: function(start, end, callback) {
        start = start.getTime()/1000;
        end = end.getTime()/1000;
        $.ajax({
            url: '/api/events/1/?start='+ start + '&end=' + end,
            dataType: 'json',
            success: function(doc) {
                var my_events = [];
                $.each(doc.person.events, function (index, elem) {
                   my_events.push({
                       title: elem.event.title,
                       start: elem.event.start,
                       end: elem.event.end,
                   });
                });
            callback(my_events);
          }
        });
    }
});

In my actual code (this is a trimmed down version) I do more with the ajax request. You can also simplify this using fullcalendar's json feed events that will pass the start and end epoch dates get parameters for you. For example:

$('#calendar').fullCalendar({
    events: "/api/events/1/"
});

Both of these solutions will make api calls to your server like http://yourwebsite.com/api/events/1/?start=123454444&end=12355324234 so you'll need to set up your server to handle that appropriately.

NOTE: In case your wondering, the "1" in these urls is used to identify the id of the user to fetch the events for.

The docs for fullcalendar are wonderful, read them, and then read them again.