FullCalendar

Color Palettes

Each of the 5 stock themes comes with its own “palettes”, which define its color values.

  • Monarch - choose from palettes/[name].css (More info)
  • Forma - choose from palettes/[name].css (More info)
  • Breezy - choose from palettes/[name].css (More info)
  • Pulse - choose from palettes/[name].css (More info)
  • Classic - there is only one - palette.css (More info)

Overriding a Color#

If you’re using a stock theme palette, you can override a color while still receiving updates/bugfixes for other theme colors. This is especially useful for the “background” color each theme defines.

  import 'fullcalendar/skeleton.css'
  import 'fullcalendar/themes/monarch/theme.css'
  import 'fullcalendar/themes/monarch/palettes/purple.css'
+ import './my-color-overrides.css'

And then in my-color-overrides.css:

:root {
  --fc-monarch-background: #f8f9fa;
}
@media not print {
  [data-color-scheme=dark] {
    --fc-monarch-background: #0f172a;
  }
}

This will not work if you use a class name, custom selector, or media query to declare dark mode (see below). You would need to fork the palette file in that case.

Forking a Palette#

Feel free to fork these CSS files into your own codebase and customize their color values! Here’s how to wire it up in your JS:

  import 'fullcalendar/skeleton.css'
  import 'fullcalendar/themes/monarch/theme.css'
- import 'fullcalendar/themes/monarch/palettes/purple.css'
+ import './my-forked-palette.css'

On the demos page, the Code button under any demo helps you fork a palette.

Dark Mode#

All stock themes support dark mode. There are three ways in which you can activate it:

Technique 1: Component Prop#

You can easily activate darkmode for just your calendar component by applying the colorScheme prop:

<FullCalendar
  colorScheme='dark'
/>

The colorScheme option takes 'light' or 'dark' and is applied as a data-color-scheme attribute on the calendar’s root element, its popovers and its drag mirrors. If it’s not set, the calendar inherits the scheme from an ancestor (technique 2). 'light' does not override a dark ancestor, though: the stock palettes only restyle for dark, so a calendar inside a data-color-scheme="dark" element stays dark.

However, when it comes to SSR, you might want to use technique 2 or 3 to avoid flickering.

Technique 2: Data Attribute#

You can apply the data-color-scheme HTML attribute to the body or any other parent.

<body data-color-scheme="dark">

No other steps necessary! The calendar will automatically pick up on this.

Technique 3: Class Name or Other Selector#

If you must apply a class name to the body or other parent, you can fork the palette file to leverage it:

<body class="dark">

CSS:

-  [data-color-scheme=dark] {
+  .dark {
    --fc-monarch-primary: #D0BCFF;
    --fc-monarch-primary-foreground: #381E72;

This technique works for any CSS selector.

Technique 4: Media Query#

If you want to detect what the user-agent prefers for light/dark, fork the palette and leverage a media query:

-  [data-color-scheme=dark] {
+  @media (prefers-color-scheme: dark) {
    --fc-monarch-primary: #D0BCFF;
    --fc-monarch-primary-foreground: #381E72;

Need Help?#

On the demos page, the Code button under any demo helps you choose a dark-mode technique.