edit doc

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. A setup like this will ensure all necessary files are compiled together into a unified bundle. You won’t need to worry about manually including <script> tags on the page.

Example repos:

Initialize a Calendar with Plugins

FullCalendar’s functionality is broken up into “plugins” (see a full list). You only include a plugin if you need the features it provides, otherwise, you can omit the plugin and prevent it from being compiled into your bundle, saving space. By default, the bare core of FullCalendar does not do anything. You’ll need to use a plugin to display a calendar view at the very least.

First, use NPM or Yarn to install the core package along with any plugins you plan to use:

npm install \
  @fullcalendar/core \
  @fullcalendar/daygrid \
  @fullcalendar/timegrid \
  @fullcalendar/list

Then, import your plugins and supply them to a new Calendar instance:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

let calendarEl = document.getElementById('calendar');
let calendar = new Calendar(calendarEl, {
  plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,listWeek'
  }
});
calendar.render();

Premium Plugins

The set of premium plugins works in the same way. You’ll need to install the core package, the resource package, and any premium plugins you plan to use.

npm install --save \
  @fullcalendar/core \
  @fullcalendar/resource \
  @fullcalendar/resource-timeline