logo

FullCalendar

This version is in beta. Read the release notes

Event Parsing

When you give your calendar event data, whether it’s through an array, a json feed, or the addEvent method, you specify the event as a plan JavaScript object with properties. This object then gets “parsed” into a proper Event Object that is then exposed in other parts of the API, like the eventRender method.

This article describes all the properties you may supply in your plain, pre-parsed object. To demonstrate the simplest case:

var calendar = new Calendar(calendarEl, {
  events: [
    { // this object will be "parsed" into an Event Object
      title: 'The Title', // a property!
      start: '2018-09-01', // a property!
      end: '2018-09-02' // a property! ** see important note below about 'end' **
    }
  ]
})

Here are all the available properties, all of which are optional:

id

String or Integer. Will uniquely identify your event. Useful for getEventById.

groupId

String or Integer. 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 the view, if applicable. Determines if time text is displayed in the event. If this value is not specified, it will be inferred by the start/end. See notes below.

Do not put quotes around this value. That would make it a string, not a boolean.

start

Something date-parseable. When your event begins. If your event is explicitly allDay, hour/minutes/seconds/ms will be ignored.

end

Something date-parseable. When your event ends. If your event is explicitly allDay, hour/minutes/seconds/ms will be ignored. If omitted, your events will appear to have the default duration. See defaultAllDayEventDuration, defaultTimedEventDuration, and forceEventDuration for more info.

This value is exclusive! I repeat, this value is exclusive!!! If you have an all-day event that has an end of 2018-09-03, then it will appear to span through the 2nd of the month, but will end before the start of the 3rd of the month.

daysOfWeek

For defining a simple recurring event.

startTime

For defining a simple recurring event.

endTime

For defining a simple recurring event.

startRecur

For defining a simple recurring event.

endRecur

For defining a simple recurring event.

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.

className or
classNames

A single string like 'myclass', a space-separated string like 'myclass1 myclass2', or an array of strings like [ 'myclass1', myclass2' ]. Determines which HTML classNames will be attached to the rendered event.

editable

true or false. Overrides the master editable option for this single event.

startEditable

true or false. Overrides the master eventStartEditable option for this single event.

durationEditable

true or false. Overrides the master eventDurationEditable option for this single event.

resourceEditable

true or false. Overrides the master eventResourceEditable option for this single event. Requires the Scheduler Plugin.

resourceId

A string ID of a Resource. See Associating Events with Resources. Requires the Scheduler Plugin.

resourceIds

An array of string IDs of Resources. See Associating Events with Resources. Requires the Scheduler Plugin.

rendering

Allows alternate rendering of the event, like background events. Can be empty, "background", or "inverse-background"

overlap

true or false. Overrides the master eventOverlap option for this single event. If false, prevents this event from being dragged/resized over other events. Also prevents other events from being dragged/resized over this event.

constraint

a groupId belonging to other events, "businessHours", or an object. Overrides the master eventConstraint option for this single event.

color

String. An alias for specifying the backgroundColor and borderColor at the same time.

backgroundColor

Sets an event’s background color just like the calendar-wide eventBackgroundColor option.

borderColor

Sets an event’s border color just like the calendar-wide eventBorderColor option.

textColor

Sets an event’s text color just like the calendar-wide eventTextColor option.

extendedProps

A plain object of miscellaneous other properties you want to store. Will be directly transferred to the extendedProps hash in each Event Object. It is often useful to use these props in a custom eventRender callback.

any other prop!

Every other non-standard prop will be transferred over to the extendedProps hash in the Event Object. However, it is recommended to explicitly define these in the extendedProps hash.

Inferring allDay

If your event object does not explicitly define an allDay value, FullCalendar will do its best to guess. It will look at the start and end values of your supplied event, and if both are ISO8601 strings in the format 2018-09-01 without time parts, it will infer allDay as true.