logo

FullCalendar

themeSystem

Renders the calendar with a given theme system.

String, default: 'standard'

'standard'
Renders a minimal look & feel, the look in most of the demos. Does not require any CSS files beyond the FullCalendar base files.
'bootstrap3'
Prepares the calendar for a Bootstrap 3 theme. The Bootstrap stylesheet must be separately loaded in its own <link> tag. See a demo.
'bootstrap4'
Prepares the calendar for a Bootstrap 4 theme. The Bootstrap stylesheet must be separately loaded in its own <link> tag. Also, a FontAwesome stylesheet must be loaded (more info). See a demo. Bootstrap 4 support was added in v3.9.0.
'jquery-ui'
Prepares the calendar for a jQuery UI theme. The jQuery UI CSS file file must be separately loaded in its own <link> tag. See a demo.

Explore themes with the theme chooser »

3rd Party Bootstrap Themes

You can use the standard Bootstrap 3 theme downloaded from getbootstrap.com.

You can also use themes downloaded from 3rd party providers. Google “free bootstrap themes” as a starting point.

The theme you download might already have custom CSS written to style FullCalendar. If so, specifying theme: 'bootstrap3' is unnecessary. If in doubt, try both methods to see which one looks better.

jQuery UI Theme Roller

Custom jQuery UI themes can be created with the jQuery UI ThemeRoller.

Legacy

The themeSystem option was introduced in version 3.5.0 with the introduction of Bootstrap theming. Prior, jQuery UI theming was available via the now-deprecated theme: true option.