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 Webpack 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
FullCalendar offers the following packages:
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
CSS Customization
This article describes the various techniques for customizing the CSS of your calendar.
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.
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.
ClassName Inputs
CSS classNames can be injected into FullCalendar’s DOM in various places. They can be provided in the following formats. These examples use eventClassNames from the event render hooks:
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:
Content Security Policy (CSP)
If your application has a Content Security Policy (CSP), there are some things to consider.