jQuery FullCalendar click 'next' event notificatin - asp.net

Question

How can i get notified when the user click on 'next' (arrow) ?
I'm using the calendar in month view and I want to load the next month data on demand.
Also, do smbdy has an example of consuming data from ASP.NET (AJAX call) ?

Answer 1

you can use the viewDisplay trigger (http://arshaw.com/fullcalendar/docs/display/viewDisplay/) but that gets called also when the calendar loads, or the user switches views.
it sounds like you'd want an events function instead:
http://arshaw.com/fullcalendar/docs/event_data/events_function/
for the asp.net thing, have you looked here?
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/03/using-fullcalendar-jquery-component-with-asp-net-mvc.aspx

Answer 2

Your way of approaching is wrong. You may need to write an API which returns the list of calendar objects in JSON, and use the following options.
$('#calendar').fullCalendar({
events: '/myfeed.php'
});
Then, fullcalendar will automatically call /myfeed.php whenever it needs.
e.g. If a user clicks 'prev' or 'next' month button.
Here's the example URL fullcalendar will generate :
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
For more information, please visit the following URL.
http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Answer 3

Here the viewDisplay function is called when the user clicks next/prev. Also, you can see that is is getting the next lot of data via AJAX.
I hope this helps :)
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceMonth'
},
defaultView: 'resourceWeek',
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}