logo

FullCalendar

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

Initializing with Options

Once you have FullCalendar and its dependencies loaded onto the page, you can write JS code that initializes a calendar. This code must be executed after the page has initialized. The best way to do this is with DOMContentLoaded like so:

document.addEventListener('DOMContentLoaded', function() { // page is now ready...
  var calendarEl = document.getElementById('calendar'); // grab element reference

  var calendar = new FullCalendar.Calendar(calendarEl, {
    // put your options and callbacks here
  });

  calendar.render();
});

The above example assumes you are using a <script> tag that supplies the FullCalendar browser global. The following example is the same thing, but written as an ES6 module:

import { Calendar } from 'fullcalendar';

document.addEventListener('DOMContentLoaded', function() { // page is now ready...
  var calendarEl = document.getElementById('calendar'); // grab element reference

  var calendar = new Calendar(calendarEl, {
    // put your options and callbacks here
  });

  calendar.render();
});

The code relies on there being an element with an id of “calendar” in the body of your page. The calendar will be placed inside this div:

<div id='calendar'></div>

An that’s it, you should see a month-based calendar that has no events on it. If you want to learn how to display events, visit the Google Calendar or Event Parsing sections.

Options

Most of FullCalendar’s documentation describes options that affect the look or behavior of the calendar. Options are usually set when the calendar is initialized, like so:

var calendar = new Calendar({
  weekends: false // will hide Saturdays and Sundays
});

An important option is defaultView, which determines which calendar view is first displayed upon loading your calendar. For a list of all available views, see the “Views” section of the main docs page.