logo

FullCalendar

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, download the JavaScript files for FullCalendar’s two dependencies: jQuery and Moment.

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

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

It is important that you load jQuery and Moment’s JS files before loading FullCalendar’s JS files.

As an NPM module (Webpack / Browserify)

Use NPM to install FullCalendar:

npm install jquery 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 both jQuery and FullCalendar:

import $ from 'jquery';
import 'fullcalendar';

Your import for fullcalendar does not need to be named. It will attached to jQuery as a plugin. In the next section, you will learn how to use jQuery to initialize a calendar.

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