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 a ZIP from the releases 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 moment 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.