FullCalendar passing starting date

Question

Can someone help me understand how I can pass the start date into the calendar. I have created a Delivery Scheduler calendar and I display the delivery details in a table under the calends that is feed via the database. This requires me to refresh the page when a user select a calendar day to load the table information. I can figure out how to start the calendar on a starting date that is passed into the page.

Seems like this would be easy but I am doing something wrong.

$('#calendar').fullCalendar(Options); $('#calendar').fullCalendar('gotoDate', '2012-10-21');

Answer 1

Sample based on documentation http://arshaw.com/fullcalendar/docs/current_date/gotoDate/

Remember that month is 0-based, so 10 means November.

$(document).ready(function () {

    var calendar = $('#calendar').fullCalendar({
        events:[
            { title:'All Day Event', start:new Date(2012, 10, 20)},
            { title:'Long Event', start:new Date(2012, 10, 21), end:new Date(2012, 10, 22)}
        ]
    });

    $('#calendar').fullCalendar('gotoDate', 2012, 10, 21);

});

Answer 2

Thank you Biesior for your helpful answer. I was able to use your suggested code to get the behavior I was looking for.

While using the approach above, I notice that Firebug's console shows two AJAX data requests being executed simultaneously, one for the view associated with the current date, and one for the view associated with the specified gotoDate.

There doesn't appear to be any additional delay from the user's perspective, and the calendar displays the requested view from the start. However, 'loading' callbacks will be called multiple times which might cause strange behavior in certain circumstances. There may also be other undesired results associated with the superfluous AJAX request for the current date.

I was able to avoid the unnecessary AJAX request by initializing the calendar without an event source, then moving to the desired date as shown by Biesior above, and then adding the event source. The sequence is shown below. I've removed some unrelated FullCalendar options and callbacks to keep it concise. There are some additional AJAX parameters, and some PHP, but the important thing to notice is when the event source is specified.

The original code results in two simultaneous AJAX requests:

$('#calendar').fullCalendar({
  events: {
    url:'/Services/GetEvents.php',
    type: 'POST',
    data: {
        lat: <?=$venLatitude?>,
        lon: <?=$venLongitude?>,
        userID: <?=$userID?>,
        distance: <?=$distance?>
    }
  }
})
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);

This adjustment results in only the desired AJAX request:

        $('#calendar').fullCalendar();
        $('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
        $('#calendar').fullCalendar('addEventSource', {
                url:'/Services/GetEvents.php',
                type: 'POST',
                data: {
                    lat: <?=$venLatitude?>,
                    lon: <?=$venLongitude?>,
                    userID: <?=$userID?>,
                    distance: <?=$distance?>
                }
            });