Support

Requesting Features

Apr 18: v7 update Latest: v6.1.17

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
Vue
Angular
Web Component

Accessibility

Accessibility
Touch Support
Optimizing for Print
Premium

Getting Started

Introduction

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 Library

Date Parsing
Date Objects
Duration Object
Date Formatting
defaultRangeSeparator
Util Methods
Plugins

Overall Display

Toolbar

headerToolbar
footerToolbar
titleFormat
titleRangeSeparator
buttonText
buttonIcons
customButtons

Theme

themeSystem
Bootstrap 5 Theming
Bootstrap 4 Theming
bootstrapFontAwesome

Sizing

height
contentHeight
aspectRatio
expandRows
updateSize
handleWindowResize
windowResizeDelay
stickyHeaderDates
stickyFooterScrollbar
Callbacks
- windowResize

Views

Month View

Month-View-specific Options
- fixedWeekCount
- showNonCurrentDates

TimeGrid View

TimeGrid-specific Options
- eventMinHeight
- eventShortHeight
- slotEventOverlap
- allDaySlot
- All-Day Render Hooks
  - allDayClassNames
  - allDayContent
  - allDayDidMount
  - allDayWillUnmount

List View

List-View-specific Options
- listDayFormat
- listDaySideFormat
- No-Events Render Hooks
  - noEventsClassNames
  - noEventsContent
  - noEventsDidMount
  - noEventsWillUnmount

DayGrid View

Daygrid-specific Options
- monthStartFormat

Multi-Month Stack

Multi-Month Grid

Multimonth-specific Options

Timeline View Premium

Timeline-specific Options
- resourceGroupField
- resourceAreaWidth
- resourceAreaColumns
- resourcesInitiallyExpanded
- slotMinWidth
- eventMinWidth
- Timeline View with no Resources
- Resource Group Render Hooks
  - resourceGroupLabelClassNames
  - resourceGroupLabelContent
  - resourceGroupLabelDidMount
  - resourceGroupLabelWillUnmount
  - resourceGroupLaneClassNames
  - resourceGroupLaneContent
  - resourceGroupLaneDidMount
  - resourceGroupLaneWillUnmount
- Resource-Area Header Render Hooks
  - resourceAreaHeaderClassNames
  - resourceAreaHeaderContent
  - resourceAreaHeaderDidMount
  - resourceAreaHeaderWillUnmount

Vertical Resource View Premium

datesAboveResources
Resource DayGrid View

Custom Views

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

View API

initialView
View Object
Calendar::view
Calendar::changeView
View Render Hooks
- viewClassNames
- viewDidMount
- viewWillUnmount

Date & Time

Date & Time Display

Whole-day Settings
- weekends
- hiddenDays
- dayHeaders
- dayHeaderFormat
- dayMinWidth
- Day-Header Render Hooks
  - dayHeaderClassNames
  - dayHeaderContent
  - dayHeaderDidMount
  - dayHeaderWillUnmount
- Day-Cell Render Hooks
  - dayCellClassNames
  - dayCellContent
  - dayCellDidMount
  - dayCellWillUnmount
Time-Axis Settings
- slotDuration
- slotLabelInterval
- slotLabelFormat
- slotMinTime
- slotMaxTime
- scrollTime
- scrollTimeReset
- Slot Render Hooks
  - slotLabelClassNames
  - slotLabelContent
  - slotLabelDidMount
  - slotLabelWillUnmount
  - slotLaneClassNames
  - slotLaneContent
  - slotLaneDidMount
  - slotLaneWillUnmount
Methods
- scrollToTime
Callbacks
- datesSet

Date Navigation

initialDate
dateIncrement
dateAlignment
validRange
Methods

navLinks
navLinkDayClick
navLinkWeekClick

Week Numbers

weekNumbers
weekNumberCalculation
weekText
weekTextLong
weekNumberFormat
Week-Number Render Hooks
- weekNumberClassNames
- weekNumberContent
- weekNumberDidMount
- weekNumberWillUnmount

Date Clicking & Selecting

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

Now Indicator

nowIndicator
now
Now-Indicator Render Hooks
- nowIndicatorClassNames
- nowIndicatorContent
- nowIndicatorDidMount
- nowIndicatorWillUnmount

businessHours
businessHours-per-resource

Events

Event Model

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

Event Sources

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

Event Display

eventColor
eventBackgroundColor
eventBorderColor
eventTextColor
eventDisplay
eventTimeFormat
displayEventTime
displayEventEnd
nextDayThreshold
eventOrder
eventOrderStrict
progressiveEventRendering
Event Render Hooks
- eventClassNames
- eventContent
- eventDidMount
- eventWillUnmount

Event Clicking & Hovering

eventClick
eventMouseEnter
eventMouseLeave

Event Dragging & Resizing

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

Event Popover

dayMaxEventRows
dayMaxEvents
eventMaxStack
moreLinkClick
dayPopoverFormat
More-Link Render Hooks
- moreLinkClassNames
- moreLinkContent
- moreLinkDidMount
- moreLinkWillUnmount

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 Render Hooks
- resourceLabelClassNames
- resourceLabelContent
- resourceLabelDidMount
- resourceLabelWillUnmount
- resourceLaneClassNames
- resourceLaneContent
- resourceLaneDidMount
- resourceLaneWillUnmount

International

Locale

locale
direction
firstDay

timeZone

Third Party

TypeScript Support

React Component

Vue Component

Angular Component

Web Component

Accessibility

Accessibility

eventInteractive
Hints
- buttonHints
- viewHint
- navLinkHint
- timeHint
- eventHint
- closeHint

Touch Support

longPressDelay
eventLongPressDelay
selectLongPressDelay

Optimizing for Print Premium

10% of profits donated to effective charities

Does your company use FullCalendar? Tell us »

© 2025 FullCalendar LLC

GitHub
License
Blog
Roadmap