You're viewing the v7 docs. Upgrading from v6?
Docs Introduction
How to get FullCalendar’s code, initialize a calendar, and other basic principles.
Getting Started
How to initialize a calendar
Initialize with ES6 Build System
For non-trivial projects, it is recommended to use an ES6-compatible build system like Vite or Rollup along with a package manager like NPM or Yarn.
Initialize with Script Tags
Use pre-built bundles and HTML script tags
Initialize with Script Tags (ESM)
Use FullCalendar as an ES module within a <script>
tag, preferably with import maps. Example:
Plugin Index
Aside from the vanilla JS package fullcalendar, there are UI-library connectors:
Handlers
How to attach handlers to your calendar, which execute when other things happen.
Methods
Methods provide ways to manipulate the calendar from JavaScript code.
More Advanced
View-Specific Options
You can specify options that apply only to specific calendar views.
Get/Set Options Dynamically
You can get/set calendar options after a calendar has already been initialized.
borderless settings
Remove borders from the calendar's outer edge.
className
Provides a ClassName Input for the calendar's root element.
ClassName Inputs
CSS class names can be injected into FullCalendar's DOM in various places via settings like eventClass, toolbarClass, dayCellClass, and many others. They accept a simple string:
Content Injection
Custom content can be injected into FullCalendar's DOM in various places. This content can be provided in the following formats. These examples use eventContent from the event render hooks:
render
Will initially render a calendar, or if it is already rendered, will rerender it.
destroy
Restores the container element to the state before FullCalendar was initialized.
rerenderDelay
The amount of milliseconds to wait before rerendering anything on a calendar.
Calendar::render
Initially render the calendar, or rerender it after initialization.
Calendar::batchRendering
A way to group operations that cause rerenders.