Custom Themes

Build your own theme from class-name props, one for each element in the calendar. At its heart, the theme system is a collection of class-name props. Each prop accepts a string or a function that receives state and returns a string.

For a full index of which props are available on which elements, see Render Hook Index →

Tailwind#

With Tailwind, your theme might end up looking something like this:

import { clsx } from 'clsx'

<FullCalendar
  dayRowClass='border border-gray-500'
  dayCellClass={(state) => clsx(
    'border border-gray-400',
    state.isToday && 'bg-yellow-500',
  )}
/>

It’s easiest to fork an existing theme:

1. Open the demos and pick the theme closest to your design
2. Click one of the Code buttons underneath a demo
3. Tick “Fork theme source code”
4. Copy and paste ALL files into your code editor

Global CSS#

With global CSS, your theme might end up looking something like this:

import { clsx } from 'clsx'
import './global-styles.css'

<FullCalendar
  dayRowClass='calendar-row'
  dayCellClass={(state) => clsx(
    'calendar-cell',
    state.isToday && 'calendar-cell-today',
  )}
/>

global-styles.css:

.calendar-row {
  border: 1px solid #6b7280;
}

.calendar-cell {
  border: 1px solid #9ca3af;
}

.calendar-cell-today {
  background-color: #eab308;
}

It’s easiest to fork an existing theme:

1. Open the demos and pick the theme closest to your design
2. Click one of the Code buttons underneath a demo
3. Tick “Fork theme source code”
4. Click Styling: “Global CSS”
5. Copy and paste ALL files into your code editor

CSS Modules#

With CSS modules, your theme might end up looking something like this:

import { clsx } from 'clsx'
import classNames from './styles.module.css'

<FullCalendar
  dayRowClass={classNames.row}
  dayCellClass={(state) => clsx(
    classNames.cell,
    state.isToday && classNames.cellToday,
  )}
/>

styles.module.css:

.row {
  border: 1px solid #6b7280;
}

.cell {
  border: 1px solid #9ca3af;
}

.cellToday {
  background-color: #eab308;
}

It’s easiest to fork an existing theme:

1. Open the demos and pick the theme closest to your design
2. Click one of the Code buttons underneath a demo
3. Tick “Fork theme source code”
4. Click Styling: “CSS Module”
5. Copy and paste ALL files into your code editor

Event Colors#

Each event can have its own color, but a theme’s class names are the same for every event. To bridge the two, every event element has its colors set as CSS variables:

• --fc-event-color - from eventColor, or the event’s own color
• --fc-event-contrast-color - from eventContrastColor, or the event’s own contrastColor

Use them in your event classes instead of a fixed color. With Tailwind:

<FullCalendar
  eventColor='#3b82f6'
  eventContrastColor='#fff'
  blockEventClass='bg-(--fc-event-color)'
  blockEventInnerClass='text-(--fc-event-contrast-color)'
  listItemEventBeforeClass='size-2 rounded-full bg-(--fc-event-color)'
/>

With plain CSS:

.calendar-block-event {
  background-color: var(--fc-event-color);
}

.calendar-block-event-inner {
  color: var(--fc-event-contrast-color);
}

Background events get the same variables. See Event Render Hooks and Background Event Render Hooks.