FullCalendar

ClassName Inputs

Add your own CSS class names to the calendar’s elements. They’re injected into FullCalendar’s DOM 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: (info) => clsx(
  'my-event',
  info.isPast && 'my-event--past',
  info.isSelected && 'my-event--selected',
)

This works with Tailwind too:

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