jQuery get the next month data using fullcalendar plugin

Question

I am using jQuery fullcalendar plugin.

How do I get the next month data i.e passing data by clicking the 'next' button

$('#calendar').fullCalendar({
    events:"automapic_admin.php?current_date='+currentdate,
    eventRender: function(event, element) {
        $('.fc-event-title', element).html(event.title);
    }
});

Actually, I am using the click event to call the next button.

$(".fc-button-next span").live("click", function(){ });

Answer 1

The answer above got me part-way there but I wound up with what I think is slightly simpler and is also updated for the latest FullCalendar.

    $(document).ready(function() {
        var d = new Date();

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            fixedWeekCount: true, 
            defaultDate: d,
            editable: true,
            eventLimit: false,
            events: function(start, end, timezone, callback) {
                var eventsUrl = '/events/' + end.year() + '/' + parseInt(end.month());
                $.ajax({
                    url: eventsUrl,
                    type: 'GET'
                }).done(function(response) {
                    callback(response);
                }).fail(function(response, status, error) {
                    alert(status + ': ' + error);
                });
            },
            loading: function(isLoading) {
                if (isLoading) {
                    $('#loading').show();
                } else {
                    $('#loading').hide();
                }
            }
        });
    });

The '/events/' URL includes a year and month (e.g. '/events/2015/2') to get events for a particular month. When the calendar first loads it defaults to the current date, and conveniently the end argument passed to the calendar on first load is the same as start so it can be used both on first load, as well as being leveraged when the previous and next buttons are clicked.

Anyway, this worked well for me so I thought I'd share since it was a bit different than any of the other examples I found while working on this today.

Answer 2

When the 'next' and 'previous' buttons are clicked, the events function is called. Here is an example to load data for the current year and month.

$(document).ready(function () {
    loadCal();
});

function loadCal() {

    var current_url = '';
    var new_url     = '';

    $('#calendar').fullCalendar({

        // other options here...

        events: function( start, end, callback ) {

            var year  = end.getFullYear();
            var month = end.getMonth();

            new_url  = '/api/user/events/list/' + id + '/year/' + year + '/month/' + month;

            if( new_url != current_url ){

                $.ajax({
                    url: new_url,
                    dataType: 'json',
                    type: 'POST',
                    success: function( response ) {

                        current_url = new_url;
                        user_events = response;

                        callback(response);
                    }
                })
           }else{
               callback(user_events);
           }
        }
    })
}

When you retrieve the results in a query, make sure you include at least the last 10 days from the previous month and the first 10 days from the next month. Here is an example in PHP:

if( $month === null ){
    $month = '01';
}

$startDate     = $year . '-' .  $month . '-01';
$startDateTime = new \DateTime( $startDate );
$startDateTime->modify( '-10 days' );
$startDate     = $startDateTime->format( 'Y-m-d H:i:s' );

I decided to pull all events for the whole year at a timne rather than by month to reduce requests because the number of events was low. If there are a significant number of events per user then pulling them by month makes more sense.