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 »

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. Visit themes.fullcalendar.io
2. Click one of the Code buttons underneath a demo
3. Click “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. Visit themes.fullcalendar.io
2. Click one of the Code buttons underneath a demo
3. Click “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. Visit themes.fullcalendar.io
2. Click one of the Code buttons underneath a demo
3. Click “Fork theme source code”
4. Click Styling: “CSS Module”
5. Copy and paste ALL files into your code editor