FullCalendar

Adam Shaw

events (as a json feed)

A URL of a JSON feed that the calendar will fetch Event Objects from.

FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters.

The GET parameter names will be determined by the startParam and endParam options. ("start" and "end" by default).

The value of the parameters will always be UNIX timestamps (seconds since 1970).

Consider the following script:

$('#calendar').fullCalendar({
    events: '/myfeed.php'
});

Here is a URL that FullCalendar might visit:

/myfeed.php?start=1262332800&end=1265011200&_=1263178646

The _ parameter is automatically inserted to prevent the browser from caching the result (more below).

If you need to access a feed that is in a different domain, you can use JSONP with a ? in your URL (see the JSONP discussion in $.ajax).

Extended Form

Since version 1.5, you are able to specify Event Source options. This often comes in handy when you are using the eventSources option to specify multiple event sources and you want certain options to only apply to certain sources. However, to do this, you must write things a little differently:

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            url: '/myfeed.php', // use the `url` property
            color: 'yellow',    // an option!
            textColor: 'black'  // an option!
        }

        // any other sources...

    ]

});

A list of general Event Source options can be found here. However, there are additional options that apply specifically to JSON feeds:

startParam Sets the startParam option, but only for this source.
endParam Sets the endParam option, but only for this source.

jQuery $.ajax options

You can also specify any of the jQuery $.ajax options within the same object! This allows you to easily pass additional parameters to your feed script, as well as listen to ajax callbacks:

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param1: 'something',
                custom_param2: 'somethingelse'
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        }

        // any other sources...

    ]

});

Here is the same example, but using the single-source events option instead:

$('#calendar').fullCalendar({

    events: {
        url: '/myfeed.php',
        type: 'POST',
        data: {
            custom_param1: 'something',
            custom_param2: 'somethingelse'
        },
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    }

});

Dynamic data parameter

The data parameters, which sends information to your JSON script through either GET or POST, can also be specified as a function, in order to send dynamic values:

$('#calendar').fullCalendar({

    events: {
        url: '/myfeed.php',
        data: function() { // a function that returns an object
            return {
                dynamic_value: Math.random()
            };
        }
    }

});

The startParam and endParam values will still automatically be included. This feature is new in version 1.6.3.

Caching

By default, FullCalendar will insert a _ parameter into the URL of the request to prevent the browser from caching the response. FullCalendar achieves this internally by setting the $.ajax parameter to false.

If you would like to counteract this and prevent the _ parameter, you can set the cache option to true:

$('#calendar').fullCalendar({

    events: {
        url: '/myfeed.php',
        cache: true
    }

});

 

Support FullCalendar!