CODEWITHSUNDEEP
jqueryfullcalendar
Josh
Josh

Reputation: 31

Pulling Data for next/prev months

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?

Upvotes: 3

Views: 3911

Answers (3)

Onshop
Onshop

Reputation: 3095

I wrote a variation on sdolan's answer. The example is here:

jquery fullcalendar: calling events on clicking prev and next button in fullcalendar

Upvotes: 0

Sam Dolan
Sam Dolan

Reputation: 32542

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.

Upvotes: 5

theycallmemorty
theycallmemorty

Reputation: 12962

You need to tell the control where to load event data from when you initialize it. Your choices are to specify a json feed, an array of events or a function you write which will retrieve all of the events.

If you use the function or json method, the fullcalendar control will only attempt to load data for the range the user is attempting to view. So when the user navigates to the next month, that months events will be retrieved from the feed/function.

Upvotes: 0

Related Questions