Web Component

FullCalendar comes as a Web Component (aka “Custom Element”).

Installing via NPM

The first step is to install the FullCalendar-related dependencies:

npm install --save @fullcalendar/web-component temporal-polyfill

The temporal-polyfill package is small and tree-shakable, and can be used as a global polyfill if you explicitly opt-in (more info).

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 your JS:

// globally installs the <full-calendar> tag
import "@fullcalendar/web-component/global";

// plugins
import themePlugin from "@fullcalendar/web-component/themes/monarch"; // YOUR THEME
import dayGridPlugin from "@fullcalendar/web-component/daygrid";

// stylesheets
import '@fullcalendar/web-component/skeleton.css'; // ALWAYS NEED SKELETON
import '@fullcalendar/web-component/themes/monarch/theme.css'; // YOUR THEME
import '@fullcalendar/web-component/themes/monarch/palettes/purple.css'; // YOUR THEME'S PALETTE

// initialize
const fullCalendarElement = document.querySelector('full-calendar')
fullCalendarElement.options = {
  plugins: [themePlugin, dayGridPlugin]
}

Then, in your HTML:

<full-calendar></full-calendar>

Customizing the Tag Name

If you want a tag-name different that the default full-calendar, use this technique:

- import "@fullcalendar/web-component/global";
+ import { FullCalendarElement } from "@fullcalendar/web-component";

+ customElements.define("some-calendar-tag", FullCalendarElement);

HTML:

<some-calendar-tag></some-calendar-tag>

Installing via Script Tag

Install with the following <script> and <link> tags:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <!-- STANDARD JS -->
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@{latestReleases.v7}/all.global.js"></script>

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

    <!-- STYLESHEETS -->
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@{latestReleases.v7}/skeleton.styles.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@{latestReleases.v7}/themes/monarch/theme.styles.js'></script>
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@{latestReleases.v7}/themes/monarch/palettes/purple.css' rel='stylesheet' />
  </head>
  <body>
    <full-calendar
      options='{
        "headerToolbar": {
          "left": "prev,next today",
          "center": "title",
          "right": "dayGridMonth,dayGridWeek,dayGridDay"
        }
      }'
    />
  </body>
</html>

Please note, skeleton.styles.js and theme.styles.js are <script> tags, and yes they do inject CSS. This is required for the web component’s shadow DOM.

Options

The full-calendar element accepts a single options attribute. It must be a valid JSON string.

It is possible to set an options property on the DOM element. This property is a real JavaScript object, not merely a JSON string.

const fullCalendarElement = document.querySelector("full-calendar");

fullCalendarElement.options = {
  headerToolbar: {
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,dayGridWeek,dayGridDay",
  },
};

FullCalendar Premium

How do you use FullCalendar Premium’s plugins with the Web Component? They are no different than any other plugin. Just follow the same instructions as you did dayGridPlugin in the above example. You’ll need an additional package however:

npm install --save @fullcalendar/web-component-scheduler

Then, initialize your calendar. Make sure to include your schedulerLicenseKey:

// globally installs the <full-calendar> tag
import "@fullcalendar/web-component/global";

// plugins
import themePlugin from "@fullcalendar/web-component/themes/monarch";
import resourceTimelinePlugin from "@fullcalendar/web-component-scheduler/resource-timeline";

// stylesheets
import '@fullcalendar/web-component/skeleton.css';
import '@fullcalendar/web-component/themes/monarch/theme.css';
import '@fullcalendar/web-component/themes/monarch/palettes/purple.css';

// initialize
const fullCalendarElement = document.querySelector('full-calendar')
fullCalendarElement.options = {
  plugins: [themePlugin, resourceTimelinePlugin]
}

FullCalendar Premium via Script Tag