jQuery FullCalendar click 'next' event notificatin

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 th开发者_Go百科e next month data on demand. Also, do smbdy has an example of consuming data from ASP.NET (AJAX call) ?

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

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/

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;
}