V5 Release Notes and Upgrade Guide

• header

• headerToolbar - simply renamed

• footer

• footerToolbar - simply renamed

• defaultView

• initialView - simply renamed

• viewSkeletonRender
• viewSkeletonDestroy

Use the view render hooks instead:

• viewClassNames - for adding classNames to the root view element
• viewDidMount - simply renamed from viewSkeletonRender
• viewWillUnmount - simply renamed from viewSkeletonDestroy

View object members

• View::calendar - the master Calendar Object this view belongs to

• defaultDate

• initialDate - simply renamed

• columnHeader

• dayHeaders - simply renamed. Accepts true or false for enabling headers.

• columnHeaderFormat

• dayHeaderFormat - simply renamed

• columnHeaderText
• columnHeaderHtml

Use the day-header render hooks instead:

• dayHeaderClassNames
• dayHeaderContent - for emulating columnHeaderText, return a string. For emulating columnHeaderHtml, return an object like { html: '' }. The received arguments are different.
• dayHeaderDidMount
• dayHeaderWillUnmount

• dayRender

Use the day-cell render hooks instead:

• dayCellClassNames - for injecting classNames
• dayCellContent - for if you injected DOM content via dayRender
• dayCellDidMount - for if you needed the DOM element in dayRender
• dayCellWillUnmount

• dayMinWidth - creates a horizontal scrollbar if day cells get any narrower. For daygrid and timegrid views only. Requires the @fullcalendar/scrollgrid premium plugin.

• minTime

• slotMinTime - simply renamed

• maxTime

• slotMaxTime - simply renamed

• slotWidth

• slotMinWidth - simply renamed. same exact behavior. only applies to timeline view

The following slot render hooks are now available:

• slotLabelClassNames
• slotLabelContent
• slotLabelDidMount
• slotLabelWillUnmount

You can now customize the long span of content next to the slot's date/time text. In timegrid view, this is the horizontal space that passes under all of the days. In timeline view, this is the vertical space that passes through the resources. Use the following slot render hooks:

• slotLaneClassNames
• slotLaneContent
• slotLaneDidMount
• slotLaneWillUnmount

timeline slot classNames

In timeline view, slots now have more descriptive classNames like fc-slot-future, fc-slot-past, fc-slot-fri, fc-slot-sat, fc-slot-today, etc.

• datesRender

• datesSet - renamed from datesRender. Called after a view's dates are initialized or when they change. For rendering, you are encouraged to use the render hooks on the individual date cells instead, like the day header, day cell, and slot render hooks.

• datesDestroy

No direct replacement. For rendering, handle individual date cells via dayHeaderWillUnmount, dayCellWillUnmount, or slotLabelWillUnmount.

• weekNumbersWithinDays

This is now the default behavior. The weekNumbersWithinDays:false behavior has been retired. See the old docs for an illustration of the difference.

• weekLabel

• weekText - simply renamed. the text that gets prefixed to the formatted week number

• weekNumberFormat - a date formatting config that controls how week numbers look. By default it's set to { week: 'narrow' } and will look like "W6".

default week number formatting

Week numbers were previously formatted as plain numeric values like "6". Now, by default, they are formatted with their weekText prefix, so they'll look like "W6". To change back to the old behavior, change weekNumberFormat to { week: 'numeric' }

The following week-number render hooks are now available:

• weekNumberClassNames
• weekNumberContent
• weekNumberDidMount
• weekNumberWillUnmount

• allDayText
• allDayHtml

Use the all-day render hooks instead:

• allDayClassNames
• allDayContent - for emulating allDayText, assign a string. For emulating allDayHtml, assign an object like { html: '' }
• allDayDidMount
• allDayWillUnmount

• eventRender
• eventDestroy

Use the new event render hooks instead:

• eventClassNames - for injecting classNames
• eventContent - for if you injected DOM content via eventRender. You cannot cancel rendering by returning false however. Instead, make sure your event object has its display property set to 'none' before eventContent executes. You can do this dynamically by setting event.setProp('display', 'none').
• eventDidMount - for if you needed the DOM element in eventRender
• eventWillUnmount - like eventDestroy, but receives additional arguments

• eventPositioned

No direct replacement. You can use eventDidMount to know when the element has been inserted into the DOM, but it's no longer possible to know when its position has stabilized.

• _eventsPositioned

No direct replacement.

• Calendar::rerenderEvents method

Call Calendar::render after initialization to rerender everything.

• timeGridEventMinHeight

• eventMinHeight - simply renamed

• rendering setting within each Event Object
• eventRendering setting on the Calendar

These settings have been renamed to display and eventDisplay respectively. They accept:

• 'block' - new. always display as a solid rectangle in daygrid
• 'list-item' - new. always display with a dot when in daygrid
• 'auto' - new. the default. in daygrid, will display as 'block' if all-day or multi-day, otherwise will display as 'list-item'
• 'background'
• 'inverse-background'
• 'none' - new. don't display at all

daygrid events

By default, single-day timed events in daygrid will render with a dot as opposed to a solid filled rectangle. To revert to the old behavior, set the calendar-wide eventDisplay option to 'block'. See above for other choices.

timegrid events

New feature: as the user scrolls down the timegrid, event title was still visible via sticky positioning.

Styling change: the resizer on the bottom of the event is no longer styled with a = icon when hovered. To simulate the old UI, add the CSS in this codepen

background events

Background events now display their title (addresses #2746). They previously did not. To prevent this, don’t assign a title to the Event Object Input. Alternatively, you can override the rendering like this:

eventContent: function(arg) {
  if (arg.event.display.match(/background/)) { // handles inverse-background too
    return null
  }
}

event classNames

Event elements now have more descriptive classNames about what dates they span. For example, fc-event-past, fc-event-future, and fc-event-today.

• Calendar::addEvent

Can now specify true as the source argument to add to the first source.

• eventDrop

A relatedEvents array is now supplied.

• eventResize

Within the given argument, the prevEvent property has been renamed to oldEvent. Also, a relatedEvents array is now supplied.

• eventReceive
• eventLeave

Both now receive a revert function that can be called to reverse the effects of the drag-n-drop. Also, both now receive a relatedEvents array.

Methods for monitoring changes in event data:

• eventAdd
• eventChange
• eventRemove
• eventsSet

Event sources

• initialEvents - A new way of supplying events when using React, Vue, or Angular

Event methods

For serialization:

• Event::toPlainObject
• Event::toJSON (an alias)

Event properties

A convenient way to get the start/end dates of an Event Object in ISO8601 string form:

• Event::startStr
• Event::endStr

• eventLimit

• dayMaxEventRows - the max number of stacked event levels within a given day. This includes the +more link if present. This is the same behavior as v4's eventLimit. Just as in v4, setting it to true uses the cell's natural dimensions to limit events.

• dayMaxEvents - the max number of events within a given day, not counting the +more link (addresses #3035)

• eventLimitClick

• moreLinkClick - renamed from eventLimitClick. No longer receives the moreEl or dayEl properties. The segs property has been rename to allSegs.

• eventLimitText

Use the more link render hooks instead:

• moreLinkClassNames
• moreLinkContent - for emulating eventLimitText, return a string. The received arguments are different.
• moreLinkDidMount
• moreLinkWillUnmount

• resourceOrder

The default value will now force resources to be sorted by id. Previously, by default, resources were sorted in the order they were received.

• resourceText
• resourceRender

A resource "label" is anywhere the name of a resource is displayed. They exist in the header of vertical resource view and the side section of resource timeline view.

Use the following resource render hooks going forward:

• resourceLabelClassNames - for injecting classNames
• resourceLabelContent - for if you injected DOM content via resourceRender. For emulating resourceText, return a string. The received arguments are different.
• resourceLabelDidMount - for if you needed the DOM element in resourceRender
• resourceLabelWillUnmount

A resource "lane" is an element in resource-timeline view. It runs horizontally across the timeline slots for each resource.

The following resource render hooks are now available:

• resourceLaneClassNames
• resourceLaneContent
• resourceLaneDidMount
• resourceLaneWillUnmount

• Calendar::rerenderResources method

Call Calendar::render after initialization to rerender everything.

• resourceGroupText

A resource group "label" is where a group's name is displayed.

Use the following resource group render hooks going forward:

• resourceGroupLabelClassNames
• resourceGroupLabelContent - you can emulate resourceGroupText by returning a string. The received arguments are different.
• resourceGroupLabelDidMount
• resourceGroupLabelWillUnmount

A resource group "lane" is the horizontal area running along the time slots.

The following resource group render hooks are now available:

• resourceGroupLaneClassNames
• resourceGroupLaneContent
• resourceGroupLaneDidMount
• resourceGroupLaneWillUnmount

• resourceLabelText

The "resource-area header" is above the resource data and displays the text "Resources" by default. It was previously called the "resource label", a term which is now being used to describe something else! When resourceAreaColumns is activated, it will not be displayed.

Use the resource-area header render hooks going forward:

• resourceAreaHeaderClassNames
• resourceAreaHeaderContent - for emulating resourceLabelText, assign a string
• resourceAreaHeaderDidMount
• resourceAreaHeaderWillUnmount

• resourceColumns

• resourceAreaColumns - simply renamed

Properties within resourceColumns:

• labelText

Renamed to these properties within resourceAreaColumns:

• headerClassNames
• headerContent - for emulating labelText, assign a string.
• headerDidMount
• headerWillUnmount

Properties within resourceColumns:

• text
• render

Renamed to these properties within resourceAreaColumns:

• cellClassNames - for injecting classNames
• cellContent - for if you injected DOM content via render. For emulating text, return a string. The received arguments have changed.
• cellDidMount - for if you needed the DOM element in render
• cellWillUnmount

Methods for monitoring changes in resource data:

• resourceAdd
• resourceChange
• resourceRemove
• resourcesSet

• initialResources - A new way of supplying resources when using React, Vue, or Angular

Resource methods

Setters:

• Resource::setProp
• Resource::setExtendedProp

For serialization:

• Resource::toPlainObject
• Resource::toJSON (an alias)

• listDayAltFormat

• listDaySideFormat - simply renamed

• noEventsMessage

The following render hooks are now available:

• noEventsClassNames
• noEventsContent - for emulating noEventsMessage, assign a string
• noEventsDidMount
• noEventsWillUnmount

The following render hooks are now available for customizing the now indicator:

• nowIndicatorClassNames
• nowIndicatorContent
• nowIndicatorDidMount
• nowIndicatorWillUnmount

contentHeight

No longer accepts a function. Reassign imperatively via setOption.

height

No longer accepts a function. Reassign imperatively via setOption.

No longer accepts the 'parent' value. Instead, assign '100%' (addresses #4650). Any other valid css values are accepted as well.

New settings related to stickiness:

• stickyHeaderDates - whether to fix the date-headers while scrolling
• stickyFooterScrollbar - whether to fix the view's bottom horizontal scrollbar while scrolling

• duration event property

In v5, duration is an Event class property and will no longer be accessible from event.extendedProps. To keep your duration in extendedProps, provide an alternate name like in the example below:

let calendar = new Calendar({
  //...
  events: [
    {
      id: 'a',
      title: 'my event',
      start: '2020-07-25',
      myDuration: '15'
    }
  ],
  eventContent: function(info) {
    console.log(info.event.extendedProps.myDuration);
  }
  //...
})

• allDayDefault

• defaultAllDay - simply renamed

• dir

• direction - simply renamed