FullCalendar
These docs are a work in progress. Learn about v7 updates
Latest:  v7.0.0-beta.7
Introduction
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. Leverage one of FullCalendar’s prebuilt bundles or include individual plugins

Standard Bundle

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

Next, choose one of the standard themes from themes.fullcalendar.io, along with a color palette. The examples below show a simplified way of importing the color palette (ex: purple.css), but please be aware, there are better ways to integrated with dark mode.

Then, write the following initialization code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- STANDARD JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/all.global.js"></script>

    <!-- THEME JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/themes/monarch/global.js"></script>

    <!-- STYLESHEETS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/skeleton.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/themes/monarch/theme.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/themes/monarch/palettes/purple.css' rel='stylesheet' />

    <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 all.global(.min).js file includes the following plugins:

Premium Bundle

First, follow the standard instructions above to install the fullcalendar package.

Next, 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" />

    <!-- STANDARD + SCHEDULER JS -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/all.global.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@{latestReleases.v7}/all.global.js'></script>

    <!-- THEME JS -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/themes/monarch/global.js'></script>
  
    <!-- STYLESHEETS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/skeleton.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/themes/monarch/theme.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/themes/monarch/palettes/purple.css' rel='stylesheet' />

    <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 »

The fullcalendar-scheduler bundle’s all.global(.min).js file includes the following packages: