Stock Themes

FullCalendar ships with five ready-made themes. Pick one, pick a color palette for it, and wire both into your project as shown below for your framework.

See them all live, in every palette and in light and dark mode:

• Monarch — inspired by Material Design 3. Palettes: blue, green, purple (default), red, yellow.
• Forma — inspired by Fluent UI. Palettes: blue (default), green, purple, red.
• Breezy — inspired by Tailwind Plus. Palettes: amber, emerald, indigo (default), rose.
• Pulse — a minimal Apple-like design. Palettes: blue, green, purple, red (default).
• Classic — the look of FullCalendar v6 and earlier. A single palette.

Every stock theme supports dark mode.

Using a component library instead? Shadcn, MUI and Bootstrap 5 each take their look from your library’s theme and have their own installation guides. To design your own look from scratch, see Custom Themes.

What a theme is made of#

Whichever framework you use, installing a stock theme means adding three things. The examples below use Monarch with its purple palette; swap in your own theme and palette names.

1. The theme plugin — a JS module, supplied in your plugins array (script-tag builds register it for you).
2. The theme stylesheet — theme.css, alongside the skeleton.css that every calendar needs.
3. A palette stylesheet — palettes/[name].css, which supplies the theme’s colors. Classic has a single palette.css instead.

Each framework package exposes these at the same paths under themes/. The sections below show the lines that differ per framework; each links to that framework’s guide for the full setup.

Vanilla JS#

Full guide →

import { Calendar } from 'fullcalendar';
import themePlugin from 'fullcalendar/themes/monarch'; // YOUR THEME
import dayGridPlugin from 'fullcalendar/daygrid';

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

const calendar = new Calendar(calendarEl, {
  plugins: [themePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
});
calendar.render();

With script tags, the theme’s global.js registers itself, so there is no plugins array to write:

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/all/global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/themes/monarch/global.js"></script>

<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/skeleton.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/themes/monarch/theme.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/themes/monarch/palettes/purple.css' rel='stylesheet' />

React#

Full guide →

import FullCalendar from '@fullcalendar/react';
import themePlugin from '@fullcalendar/react/themes/monarch'; // YOUR THEME
import dayGridPlugin from '@fullcalendar/react/daygrid';

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

<FullCalendar plugins={[themePlugin, dayGridPlugin]} initialView='dayGridMonth' />

Preact#

Full guide →

import FullCalendar from '@fullcalendar/preact';
import themePlugin from '@fullcalendar/preact/themes/monarch'; // YOUR THEME
import dayGridPlugin from '@fullcalendar/preact/daygrid';

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

<FullCalendar plugins={[themePlugin, dayGridPlugin]} initialView='dayGridMonth' />

Vue#

Full guide →

<script setup>
  import FullCalendar from '@fullcalendar/vue3';
  import themePlugin from '@fullcalendar/vue3/themes/monarch'; // YOUR THEME
  import dayGridPlugin from '@fullcalendar/vue3/daygrid';

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

  const calendarOptions = {
    plugins: [themePlugin, dayGridPlugin],
    initialView: 'dayGridMonth',
  };
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

Angular#

Full guide →

The plugin is imported in your component; the stylesheets go in angular.json rather than in JS:

import themePlugin from '@fullcalendar/angular/themes/monarch'; // YOUR THEME
import dayGridPlugin from '@fullcalendar/angular/daygrid';

calendarOptions: CalendarOptions = {
  plugins: [themePlugin, dayGridPlugin],
  initialView: 'dayGridMonth',
};

  "styles": [
+   "@fullcalendar/angular/skeleton.css", // ALWAYS NEED SKELETON
+   "@fullcalendar/angular/themes/monarch/theme.css", // YOUR THEME
+   "@fullcalendar/angular/themes/monarch/palettes/purple.css", // YOUR THEME'S PALETTE
    "src/styles.css"
  ]

Web Component#

Full guide →

The calendar renders in a shadow DOM, so the skeleton and theme are imported as .styles JS modules that inject their CSS. Only the palette is a real stylesheet:

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

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

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

With script tags, the styles are <script> tags too:

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@7.1.0/all/global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@7.1.0/themes/monarch/global.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@7.1.0/skeleton.styles.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@7.1.0/themes/monarch/theme.styles.js"></script>
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@7.1.0/themes/monarch/palettes/purple.css' rel='stylesheet' />

Salesforce LWC#

Full guide →

Nothing to import: the component loads the theme’s assets for you. Name the theme and palette as attributes on the tag:

<c-full-calendar
  options={calendarOptions}
  theme="monarch"
  theme-palette="purple"
></c-full-calendar>

Next Steps#

• Color Palettes — override a color, fork a palette, or set up dark mode.
• borderless — remove the calendar’s outer borders to blend it into your page.