I use the jQueryUI FullCalendar from Adam Shaw (/).

When I press the next button the calendar loads new events from my server and I would like to show these events also as a table on my page, not only in the calendar. Is there a callback function that I can inject to do something with the events, once FullCalendar has fetched them? Or is there any other way to get the currently shown events?

I use the jQueryUI FullCalendar from Adam Shaw (http://arshaw./fullcalendar/docs/event_data/events_function/).

When I press the next button the calendar loads new events from my server and I would like to show these events also as a table on my page, not only in the calendar. Is there a callback function that I can inject to do something with the events, once FullCalendar has fetched them? Or is there any other way to get the currently shown events?

• javascript
• jquery-ui
• fullcalendar

• I have done something similar with my calendar, were i had to interact with fullcalendar events both in calendar and outside calendar through a datatable. Try to use Datatables jquery plugin it will make your life easy ;) – Henrique C. Commented Dec 17, 2013 at 9:01

4 Answers 4

For others seeking out this solution, it's pretty easy in V2. You can pass a success callback using the simple events object.

        $('#calendar').fullCalendar({
            events: {
                url: 'http://yourdatafeed',
                type: 'POST',
                error: function() {
                    // Alert on error
                },
                success: function (data) {
                    // data will have your json array of event objects
                },
            }
        });

The link you posted shows the answer to your question:

$('#calendar').fullCalendar({
events: function(start, end, callback) {
    $.ajax({
...

The "events" callback function is used every time new events are fetched. In the example the $.ajax function of jQuery is called to retrieve the events data (have a look at the ajax function). The "success" callback of $.ajax then parses the event data from the server into the format that FullCalendar expects:

$(doc).find('event').each(function() {
     events.push({
         title: $(this).attr('title'),
         start: $(this).attr('start') // will be parsed
     });
 });
callback(events);

In the example 'doc' is an xml document which contains event elements with a title and a start attribute. You should change this to whatever you retrieve from the server. With the data retrieved you can do anything you want before or after you pass it to FullCalendar (with callback(events); as in the example)

I solved the problem by actually rewriting the code to fetch the data:

var myCustomFunction = function(events) {
    // do something
}

var myCustomFetchFunction = function(start, end, callback) {
    $.ajax({
        url: 'feed.php',
        dataType: 'json',
        data: {
            // our hypothetical feed requires UNIX timestamps
            start: Math.round(start.getTime() / 1000),
            end: Math.round(end.getTime() / 1000)
            // additional parameters can be added here
        },
        success: function(events) {
            callback(events);
            // this is where I do some custom stuff with the events
            myCustomFunction(events);
        }
    });
};

$('#calendar').fullCalendar({
     events: myCustomFetchFunction()
});

Use eventRender to insert the events in your DOM. See documentation

eventRender: function(event, element) {
    // do some DOM manipulation here
}

Or collect them to insert them into the DOM later:

var collection = [];
$('#calendar').fullCalendar({
    eventRender: function(event, element) {
        collection.push(event);
    }
});