ClassName Inputs

CSS class names can be injected into FullCalendar’s DOM in various places via settings like eventClass, toolbarClass, dayCellClass, and many others. They accept a simple string:

eventClass: 'my-event'

eventClass: 'my-event highlighted' // multiple, space-separated

Tailwind

Because class names are plain strings, you can use Tailwind utility classes directly — no custom CSS needed:

toolbarClass: 'bg-red-500'

eventClass: 'rounded shadow text-sm'

Conditional Class Names

For conditional class-names, use the clsx utility. Install it:

npm install clsx

Then use it with a function-form setting:

import clsx from 'clsx'

eventClass: (data) => clsx(
  'my-event',
  data.isPast && 'my-event--past',
  data.isSelected && 'my-event--selected',
)

This works with Tailwind too:

eventClass: (data) => clsx(
  'rounded shadow',
  data.isPast && 'opacity-50',
)