logo

FullCalendar

This version is a pre-release. Read the release notes

Loading the Code

You must first get FullCalendar’s code loaded onto the page before initializing a calendar. You can write your own script tags or you can use a build system like Webpack.

Script Tags

First, download FullCalendar’s code from the downloads page. After unzipping, find the files fullcalendar.js and fullcalendar.css.

Then, write something like this in the <head> of your page:

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/fullcalendar.js'></script>

As an NPM module (Webpack / Browserify)

Use NPM to install FullCalendar:

npm install fullcalendar

Then, you must install a build system like Webpack or Browserify that will automatically bundle all of your code. See an example repo that uses Webpack »

Then, write a module that imports the FullCalendar module:

import { Calendar } from 'fullcalendar';

In the next section, you will learn how to initialize a calendar.

You must also include FullCalendar’s stylesheet somehow, either manually with a <link> tag or via Webpack’s css-loader.