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.
First, download FullCalendar’s code from the downloads page. After unzipping, find the files
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, 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.