Docs Introduction

How to initialize a calendar

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.

Use pre-built bundles and HTML script tags

Use FullCalendar as an ES module within a <script> tag, preferably with import maps. Example:

FullCalendar offers the following packages:

How to attach handlers to your calendar, which execute when other things happen.

Methods provide ways to manipulate the calendar from JavaScript code.

This article describes the various techniques for customizing the CSS of your calendar.

You can specify options that apply only to specific calendar views.

You can get/set calendar options after a calendar has already been initialized.

Will initially render a calendar, or if it is already rendered, will rerender it.

Restores the container element to the state before FullCalendar was initialized.

The amount of milliseconds to wait before rerendering anything on a calendar.

Initially render the calendar, or rerender it after initialization.

A way to group operations that cause rerenders.

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:

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:

If your application has a Content Security Policy (CSP), there are some things to consider.

The initial date displayed when the calendar first loads.

The initial view when the calendar loads.

FullCalendar provides settings, methods, and callbacks for interacting with and switching the current view.