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\').fullCalend         


        

Answer 1

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.