--- title: Web Component --- FullCalendar comes as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) (aka "Custom Element"). ## Installing via NPM The first step is to install the FullCalendar-related dependencies: ```sh 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](temporal-polyfill)). Next, choose one of the standard themes from [themes.fullcalendar.io](https://themes.fullcalendar.io), along with a [color palette](color-palettes). 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](color-palettes#dark-mode). Then, write your JS: ```js // globally installs the 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: ```html ``` ## Customizing the Tag Name If you want a tag-name different that the default `full-calendar`, use this technique: ```diff - import "@fullcalendar/web-component/global"; + import { FullCalendarElement } from "@fullcalendar/web-component"; + customElements.define("some-calendar-tag", FullCalendarElement); ``` HTML: ```html ``` ## Installing via Script Tag Install with the following `

``` Please note, `skeleton.styles.js` and `theme.styles.js` are `