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 values of these parameters will be ISO8601 date strings (like 2013-12-01T00:00:00-05:00). For precise behavior, see the timeZone docs.
Consider the following script:
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
Here is a URL that FullCalendar might visit:
/myfeed.php?start=2013-12-01T00:00:00-05:00&end=2014-01-12T00:00:00-05:00
Extended Form
You can 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:
var calendar = new Calendar(calendarEl, {
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. |
| timeZoneParam |
Sets the timeZoneParam option, but only for this source. |
| method |
|
| extraParams |
Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object. |
Here’s an example of specifying extraParams:
var calendar = new Calendar(calendarEl, {
eventSources: [
// your event source
{
url: '/myfeed.php',
method: 'POST',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: 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:
var calendar = new Calendar(calendarEl, {
events: {
url: '/myfeed.php',
method: 'POST',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
});
Dynamic extraParams parameter
The extraParams 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:
var calendar = new Calendar(calendarEl, {
events: {
url: '/myfeed.php',
extraParams: function() { // a function that returns an object
return {
dynamic_value: Math.random()
};
}
}
});
The startParam and endParam values will still automatically be included.
Caching
If you’re having trouble with your browser caching the result of an AJAX call when it shouldn’t be, the first thing you should do is check the cache-related HTTP headers that your server-side script is sending down. However, if you’d like to implement a cachebuster on the client-side, here’s how you would do it:
var calendar = new Calendar(calendarEl, {
events: {
url: '/myfeed.php',
extraParams: function() {
return {
cachebuster: new Date().valueOf()
};
}
}
});
Dates
Date parameters in JSON feeds should be provided as anything that will parse into a Date Object such as ISO8601 strings and milliseconds. However, it is not possible to serialize native JavaScript dates into JSON. Therefore, there is no support for Date object parameters in FullCalendar.
For example, the following JSON strings will work:
[
{
"title": "Event 1",
"start": "2019-09-05T09:00:00",
"end": "2019-09-05T18:00:00"
},
{
"title": "Event 2",
"start": "2019-09-08",
"end": "2019-09-10"
}
]
and
[
{
"title": "Event 1",
"start": 1567674000,
"end": 1567706400
},
{
"title": "Event 2",
"start": 1567900800,
"end": 1568073600
}
]
Something like this will NOT work:
[
{
"title": "Event 1",
"start": "new Date(2019, 8, 5, 9, 0, 0)", // will NOT parse into object
"end": "new Date(2019, 8, 5, 18, 0, 0)" // will NOT parse into object
},
{
"title": "Event 2",
"start": "new Date(2019, 8, 8)", // will NOT parse into object
"end": "new Date(2019, 8, 10)" // will NOT parse into object
}
]