Event Object

A JavaScript object that FullCalendar uses to store information about a calendar event. It is exposed in various places of the API such as getEventById and provides methods for dynamic manipulation. It was originally parsed from a plain object.

var calendar = new Calendar(calendarEl, {
  timeZone: 'UTC',
  events: [
    {
      id: 'a',
      title: 'my event',
      start: '2018-09-01'
    }
  ]
})

var event = calendar.getEventById('a') // an event object!
var start = event.start // a property (a Date object)
console.log(start.toISOString()) // "2018-09-01T00:00:00.000Z"

An event object has a number of properties and methods. All properties are read-only and you must use the methods to modify the properties. Here is a list of all properties that exist on an event object:

id	String. A unique identifier of an event. Useful for getEventById.
groupId	String. Events that share a `groupId` will be dragged and resized together automatically.
allDay	Boolean (`true` or `false`). Determines if the event is shown in the “all-day” section of relevant views. In addition, if `true` the time text is not displayed with the event.
start	Date object that obeys the current timeZone. When an event begins.
end	Date object that obeys the current timeZone. When an event ends. It could be `null` if an end wasn’t specified. Note: This value is exclusive. For example, an event with the `end` of `2018-09-03` will appear to span through `2018-09-02` but end before the start of `2018-09-03`. See how events are are parsed from a plain object for further details.
startStr	An ISO8601 string representation of the start date. If the event is all-day, there will not be a time part.
endStr	An ISO8601 string representation of the end date. If the event is all-day, there will not be a time part.
title	String. The text that will appear on an event.
url	String. A URL that will be visited when this event is clicked by the user. For more information on controlling this behavior, see the eventClick callback.
classNames	An array of strings like `[ 'myclass1', myclass2' ]`. Determines which HTML classNames will be attached to the rendered event.
editable	Boolean (`true` or `false`) or `null`. The value overriding the editable setting for this specific event.
startEditable	Boolean (`true` or `false`) or `null`. The value overriding the eventStartEditable setting for this specific event.
durationEditable	Boolean (`true` or `false`) or `null`. The value overriding the eventDurationEditable setting for this specific event.
resourceEditable	Boolean (`true` or `false`) or `null`. The value overriding the eventResourceEditable setting for this specific event.
display	The rendering type of this event. Can be `'auto'`, `'block'`, `'list-item'`, `'background'`, `'inverse-background'`, or `'none'`. See eventDisplay.
overlap	The value overriding the eventOverlap setting for this specific event. If `false`, prevents this event from being dragged/resized over other events. Also prevents other events from being dragged/resized over this event. Does not accept a function.
constraint	The eventConstraint override for this specific event.
backgroundColor	The eventBackgroundColor override for this specific event.
borderColor	The eventBorderColor override for this specific event.
textColor	The eventTextColor override for this specific event.
extendedProps	A plain object holding miscellaneous other properties specified during parsing. Receives properties in the explicitly given `extendedProps` hash as well as other non-standard properties.
source	A reference to the Event Source this event came from. If the event was added dynamically via addEvent, and the `source` parameter was not specified, this value will be `null`.

All properties are read-only. If you want to modify them, use the various methods of the Event object, such as setProp, setExtendedProp, setDates, etc.

The expected values for allDay, start and end have been discussed in detail on the subject of parsing events. It is vital to understand how the end date is exclusive throughout the FullCalendar API.

Non-standard Fields

In addition to the fields above, you may also include your own non-standard fields in each Event object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks like event render hooks. Any non-standard properites are moved into the extendedProps hash during event parsing.

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'BCH237',
      start: '2019-08-12T10:30:00',
      end: '2019-08-12T11:30:00',
      extendedProps: {
        department: 'BioChemistry'
      },
      description: 'Lecture'
    }
    // more events ...
  ],
  eventDidMount: function(info) {
    console.log(info.event.extendedProps);
    // {description: "Lecture", department: "BioChemistry"}
  }

});

Event Data Parsing

Methods

Callbacks

See Also

Event Object

Non-standard Fields