---
title: events (as a json feed)
---

A URL of a JSON feed that the calendar will fetch [Event Objects](event-object) 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](startParam) and [endParam](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](timeZone) docs.

Consider the following script:

```js
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](event-source-object#options). This often comes in handy when you are using the [eventSources](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:

```js
var calendar = new Calendar(calendarEl, {

  eventSources: [

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

    // any other sources...

  ]

});
```

A list of general Event Source options can be found [here](event-source-object#options).
<span id='options'>However, there are additional options that apply specifically to JSON feeds:</span>

<table>
<tbody>
<tr>
<th>startParam</th>
<td>

Sets the [startParam](startParam) option, but only for this source.

</td>
</tr>

<tr>
<th>endParam</th>
<td>

Sets the [endParam](endParam) option, but only for this source.

</td>
</tr>

<tr>
<th>timeZoneParam</th>
<td>

Sets the [timeZoneParam](timeZoneParam) option, but only for this source.

</td>
</tr>

<tr>
<th>method</th>
<td>

`'GET'` (the default), `'POST'`, or any other HTTP request type.

</td>
</tr>

<tr>
<th>extraParams</th>
<td>

Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object.

</td>
</tr>
</tbody>
</table>


Here's an example of specifying `extraParams`:

```js
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
      contrastColor: 'black' // a non-ajax option
    }

    // any other sources...

  ]

});
```

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

```js
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
    contrastColor: '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:

```js
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:

```js
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](date-parsing) such as [ISO8601 strings](https://en.wikipedia.org/wiki/ISO_8601) and [milliseconds](date-parsing#millisecond-time). 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:

```js
  [
    {
      "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

```js
  [
    {
      "title": "Event 1",
      "start": 1567674000000, // please specify dates in milliseconds, not seconds
      "end": 1567706400000
    },
    {
      "title": "Event 2",
      "start": 1567900800000,
      "end": 1568073600000
    }
  ]
```

Something like this will **NOT** work:

```js
  [
    {
      "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
    }
  ]
```