These docs are a work in progress. Learn about v7 updates

Latest: v7.0.0-beta.7

Documentation

Getting Started

Introduction
Premium Plugins
Date Library

Overall Display

Toolbar
Theme
Sizing

Views

Month
TimeGrid
List
DayGrid
Multi-Month Stack
Multi-Month Grid
Timeline
Premium
Vertical Resource
Premium
Custom Views
View API

Date & Time

Date & Time Display
Date Navigation
Date Nav Links
Week Numbers
Date Clicking & Selecting
Now Indicator
Business Hours

Events

Event Model
Event Sources
Event Display
Event Clicking & Hovering
Event Dragging & Resizing
Event Popover
Background Events

Resources

Resource Data
Premium
Resource Display
Premium

International

Locale
Time Zone

Third Party

TypeScript
React
Preact
Vue
Angular
Web Component

Accessibility

Accessibility
Touch Support
Optimizing for Print
Premium

Getting Started

Getting Started
Initialize with ES6 Build System
Initialize with Script Tags
Initialize with Script Tags (ESM)
Plugin Index
Handlers
Methods
More Advanced

Premium Plugins

Date Parsing
Date Objects
Duration Object
Date Formatting
temporal-polyfill
defaultRangeSeparator
Util Methods
Plugins
- Moment Formatting Plugin
- Luxon Formatting Plugin

Overall Display

headerToolbar
footerToolbar
titleFormat
titleRangeSeparator
buttons
buttonDisplay
Toolbar Render Hooks
- toolbarClass
- headerToolbarClass
- footerToolbarClass
- toolbarSectionClass
- toolbarTitleClass
- buttonGroupClass
- buttonClass
CalendarController

Color Palettes
Shadcn
MUI
Custom Themes
Render Hook Index

height
contentHeight
aspectRatio
expandRows
updateSize
stickyHeaderDates
stickyFooterScrollbar

Views

Month-View-specific Options
- fixedWeekCount
- showNonCurrentDates

TimeGrid-specific Options
Week Number Header Render Hooks
- weekNumberHeaderClass
- weekNumberHeaderInnerClass
- weekNumberHeaderContent
- weekNumberHeaderDidMount
- weekNumberHeaderWillUnmount
All-Day Header Render Hooks
- allDayHeaderClass
- allDayHeaderInnerClass
- allDayHeaderContent
- allDayHeaderDidMount
- allDayHeaderWillUnmount
All-Day Divider Render Hooks
- allDayDividerClass
Day-Lane Render Hooks
- dayLaneClass
- dayLaneInnerClass
- dayLaneDidMount
- dayLaneWillUnmount

List-View-specific Options
- listDayFormat
- listDaySideFormat
List Day Render Hooks
- listDayClass
- listDayEventsClass
List Day Header Render Hooks
- listDayHeaderClass
- listDayHeaderInnerClass
- listDayHeaderContent
- listDayHeaderDidMount
- listDayHeaderWillUnmount
No-Events Render Hooks
- noEventsClass
- noEventsInnerClass
- noEventsContent
- noEventsDidMount
- noEventsWillUnmount

Daygrid-specific Options
- dayCellFormat
- monthStartFormat
Inline Week Number Render Hooks
- inlineWeekNumberClass
- inlineWeekNumberContent
- inlineWeekNumberDidMount
- inlineWeekNumberWillUnmount

Multi-Month Stack

Multi-Month Grid

Multimonth-specific Options
Single Month Render Hooks
- singleMonthClass
- singleMonthDidMount
- singleMonthWillUnmount
Single Month Header Render Hooks
- singleMonthHeaderClass
- singleMonthHeaderInnerClass

Timeline View Premium

Timeline-specific Options
Resource Column Header Render Hooks
- resourceColumnHeaderClass
- resourceColumnHeaderContent
- resourceColumnHeaderDidMount
- resourceColumnHeaderWillUnmount
Resource Column Divider Render Hooks
- resourceColumnDividerClass
Resource Header Row Render Hooks
- resourceHeaderRowClass
Resource Row Render Hooks
- resourceRowClass
Resource Cell Render Hooks
- resourceCellClass
- resourceCellContent
- resourceCellDidMount
- resourceCellWillUnmount
Resource Expander Render Hooks
- resourceIndentClass
- resourceExpanderClass
Resource Lane Render Hooks
- resourceLaneClass
- resourceLaneTopClassNames
- resourceLaneBottomClassNames
- resourceLaneTopContent
- resourceLaneBottomContent
- resourceLaneDidMount
- resourceLaneWillUnmount
Resource Group Header Render Hooks
- resourceGroupHeaderClass
- resourceGroupHeaderInnerClass
- resourceGroupHeaderContent
- resourceGroupHeaderDidMount
- resourceGroupHeaderWillUnmount
Resource Group Lane Render Hooks
- resourceGroupLaneClass
- resourceGroupLaneInnerClass
- resourceGroupLaneContent
- resourceGroupLaneDidMount
- resourceGroupLaneWillUnmount
Non-Resource Timeline Render Hooks
- timelineTopClass
- timelineBottomClass

Vertical Resource View Premium

datesAboveResources
Resource DayGrid View

Techniques
- Custom Views via Settings
- Custom Views via JS
Duration Settings

initialView
View Object
Calendar::view
Calendar::changeView
View Render Hooks
- viewClass
- viewDidMount
- viewWillUnmount
Table Render Hooks
- tableHeaderClass
- tableBodyClass
Highlight Render Hooks
- highlightClass
Filler Render Hooks
- fillerClass

Date & Time

Date & Time Display

Whole-day Settings
Time-Axis Settings
Day-Header Render Hooks
- dayHeaderAlign
- dayHeaderClass
- dayHeaderInnerClass
- dayHeaderContent
- dayHeaderDidMount
- dayHeaderWillUnmount
Day-Header Row Render Hooks
- dayHeaderRowClass
Day-Header Divider Render Hooks
- dayHeaderDividerClass
Day-Row Render Hooks
- dayRowClass
Day-Cell Render Hooks
- dayCellClass
- dayCellTopClass
- dayCellTopInnerClass
- dayCellInnerClass
- dayCellBottomClass
- dayCellTopContent
- dayCellDidMount
- dayCellWillUnmount
Slot Header Render Hooks
- slotHeaderClass
- slotHeaderInnerClass
- slotHeaderContent
- slotHeaderDidMount
- slotHeaderWillUnmount
Slot Header Row Render Hooks
- slotHeaderRowClass
Slot Header Divider Render Hooks
- slotHeaderDividerClass
Slot Lane Render Hooks
- slotLaneClass
- slotLaneDidMount
- slotLaneWillUnmount
Methods
- scrollToTime
Callbacks
- datesSet

Date Navigation

initialDate
dateIncrement
dateAlignment
validRange
Methods

navLinks
navLinkClass
navLinkDayClick
navLinkWeekClick

weekNumbers
weekNumberCalculation
weekText
weekTextLong
weekNumberFormat

Date Clicking & Selecting

selectable
selectMirror
unselectAuto
unselectCancel
selectOverlap
selectConstraint
selectAllow
selectMinDistance
Callbacks
Methods
- Calendar::select
- Calendar::unselect

nowIndicator
now
Now-Indicator Header Render Hooks
- nowIndicatorHeaderClass
- nowIndicatorHeaderContent
- nowIndicatorHeaderDidMount
- nowIndicatorHeaderWillUnmount
Now-Indicator Line Render Hooks
- nowIndicatorLineClass
- nowIndicatorLineContent
- nowIndicatorLineDidMount
- nowIndicatorLineWillUnmount
Now-Indicator Dot Render Hooks
- nowIndicatorDotClass

businessHours
businessHours-per-resource
Business Hours Render Hooks
- nonBusinessClass

Events

Event Parsing
Event Object
Recurring Events
RRule Plugin
Event Data Parsing
Methods
Callbacks

events (as an array)
events (as a json feed)
events (as a function)
events from Google Calendar
events from an iCalendar feed
Event Source Object
eventSources
eventSourceSuccess
eventSourceFailure
initialEvents
Event Requesting
Methods

eventColor
eventContrastColor
eventDisplay
eventTimeFormat
displayEventTime
displayEventEnd
nextDayThreshold
eventOrder
eventOrderStrict
progressiveEventRendering
Event Render Hooks
- eventClass
- eventBeforeClass
- eventAfterClass
- eventInnerClass
- eventTimeClass
- eventTitleClass
- eventContent
- eventDidMount
- eventWillUnmount
Block Event Render Hooks
- blockEventClass
- blockEventBeforeClass
- blockEventAfterClass
- blockEventInnerClass
- blockEventTimeClass
- blockEventTitleClass
Row Event Render Hooks
- rowEventClass
- rowEventBeforeClass
- rowEventAfterClass
- rowEventInnerClass
- rowEventTimeClass
- rowEventTitleClass
Column Event Render Hooks
- columnEventClass
- columnEventBeforeClass
- columnEventAfterClass
- columnEventInnerClass
- columnEventTimeClass
- columnEventTitleClass
List Item Event Render Hooks
- listItemEventClass
- listItemEventBeforeClass
- listItemEventAfterClass
- listItemEventInnerClass
- listItemEventTimeClass
- listItemEventTitleClass

Event Clicking & Hovering

eventClick
eventMouseEnter
eventMouseLeave

Event Dragging & Resizing

External Event Dragging
Dragging Between Calendars
Third-Party Dragging Libraries
Flags
Effects
Control
Callbacks

dayMaxEventRows
dayMaxEvents
eventMaxStack
moreLinkClick
dayPopoverFormat
More-Link Render Hooks
- moreLinkClass
- moreLinkInnerClass
- moreLinkContent
- moreLinkDidMount
- moreLinkWillUnmount
Column More-Link Render Hooks
- columnMoreLinkClass
- columnMoreLinkInnerClass
Row More-Link Render Hooks
- rowMoreLinkClass
- rowMoreLinkInnerClass

Background Events

Resources

Resource Data Premium

resources (as an array)
resources (as a JSON feed)
resources (as a function)
Resource Parsing
Resource Object
Associating Events with Resources
refetchResourcesOnNavigate
initialResources
Methods
Callbacks

Resource Display Premium

resourceOrder
filterResourcesWithEvents
Resource Day Header Render Hooks
- resourceDayHeaderAlign
- resourceDayHeaderClass
- resourceDayHeaderInnerClass
- resourceDayHeaderContent
- resourceDayHeaderDidMount
- resourceDayHeaderWillUnmount

International

locale
direction
firstDay

Third Party

TypeScript Support

React Component

Preact Component

Angular Component

Accessibility

eventInteractive
Hints
- buttonHints
- viewHint
- navLinkHint
- closeHint

longPressDelay
eventLongPressDelay
selectLongPressDelay

Optimizing for Print Premium