edit doc

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"}
  }

});