# Stock Themes

> FullCalendar v7 documentation. Web version: https://fullcalendar.io/docs/stock-themes

FullCalendar ships with five ready-made themes. Pick one, pick a [color palette](https://fullcalendar.io/docs/color-palettes.md) for it, and wire both into your project as shown below for your framework.

[See them all live](https://fullcalendar.io/demos), in every palette and in light and dark mode:

- **Monarch** — inspired by [Material Design 3](https://m3.material.io/). Palettes: blue, green, purple (default), red, yellow.
- **Forma** — inspired by [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/). Palettes: blue (default), green, purple, red.
- **Breezy** — inspired by [Tailwind Plus](https://tailwindcss.com/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](https://fullcalendar.io/docs/color-palettes.md#dark-mode).

Using a component library instead? [Shadcn](https://fullcalendar.io/docs/shadcn.md), [MUI](https://fullcalendar.io/docs/mui.md) and [Bootstrap 5](https://fullcalendar.io/docs/bootstrap5.md) 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](https://fullcalendar.io/docs/custom-themes.md).


## 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 →](https://fullcalendar.io/docs/vanilla-js.md#installation)

```js
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](https://fullcalendar.io/docs/vanilla-js.md#via-script-tags), the theme's `global.js` registers itself, so there is no `plugins` array to write:

```html
<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 →](https://fullcalendar.io/docs/react.md#installation)

```jsx
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 →](https://fullcalendar.io/docs/preact.md#installation)

```jsx
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 →](https://fullcalendar.io/docs/vue.md#installation)

```html
<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 →](https://fullcalendar.io/docs/angular.md#installation)

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

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

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

```diff
  "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 →](https://fullcalendar.io/docs/web-component.md#installation)

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:

```js
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](https://fullcalendar.io/docs/web-component.md#via-script-tag), the styles are `<script>` tags too:

```html
<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 →](https://fullcalendar.io/docs/salesforce-lwc.md#themes-and-palettes)

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

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


## Next Steps

- [Color Palettes](https://fullcalendar.io/docs/color-palettes.md) — override a color, fork a palette, or set up dark mode.
- [borderless](https://fullcalendar.io/docs/borderless.md) — remove the calendar's outer borders to blend it into your page.