Custom Themes

At its heart, the theme system is a collection of class-name props — one for each element in the calendar. 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. For inspiration on how they’re used together, consult the built-in theme source files:

• Monarch - event-calendar.tsx, scheduler.tsx
• Forma - event-calendar.tsx, scheduler.tsx
• Breezy - event-calendar.tsx, scheduler.tsx
• Pulse - event-calendar.tsx, scheduler.tsx
• Classic - event-calendar.tsx, scheduler.tsx

Here’s how you might write a custom theme with various styling solutions…

Tailwind

import { clsx } from 'clsx'

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

CSS Modules

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;
}

Global CSS

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;
}