FullCalendar
Demos
Docs
Support
Getting Help
Reporting Bugs
Requesting Features
Contributing
Pricing
Oct 9th — v7.0.0-beta.1
Introduction
These docs are for an old release. Info on upgrading to v6
edit doc

Initialize with Script Tags

It’s possible to manually include the necessary <script> tags in the head of your HTML page and then initialize a calendar via browser globals. You will leverage one of FullCalendar’s prebuilt bundles to do this.

Standard Bundle

First, obtain the standard fullcalendar bundle in one of the following ways:

Then, write the following initialization code:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

View a runnable example »

The fullcalendar bundle’s main.js and main.css files include the following packages:

Premium Bundle

First, obtain the premium fullcalendar-scheduler bundle in one of the following ways:

Then, write the following initialization code:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar-scheduler/main.css' rel='stylesheet' />
    <script src='fullcalendar-scheduler/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'resourceTimelineWeek'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

View a runnable example »

You won’t need to include the fullcalendar-scheduler bundle AND the fullcalendar bundle. The fullcalendar-scheduler bundle includes everything.

The fullcalendar-scheduler bundle’s main.js and main.css files include the following packages:

10% of profits donated to effective charities

Does your company use FullCalendar? Tell us »

© 2024  FullCalendar LLC