Bootstrap 5 Theming

In order to correctly theme your calendar with a Bootstrap 5 theme, you must include the correct stylesheets, include the JavaScript plugin, and set themeSystem to 'bootstrap5'.

Using a Bundle

You can use the Bootstrap plugin with browser globals and script tags. First, the Bootstrap stylesheet must be separately loaded in its own <link> tag. Also, a Bootstrap Icons stylesheet must be loaded (more info). Example:

<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet'>

Then, load a FullCalendar bundle and initialize the calendar:

<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  themeSystem: 'bootstrap5'
});
...
</script>

See a demo »

Using an ES6 Build System

Alternatively, you can load the bootstrap plugin using an ES6 build system. Install the necessary FullCalendar packages first:

npm install --save @fullcalendar/core @fullcalendar/bootstrap5

Then, install the packages for Bootstrap and Bootstrap Icons:

npm install --save bootstrap bootstrap-icons

Then, import the necessary packages and initialize your calendar:

// import the third-party stylesheets directly from your JS
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'; // needs additional webpack config!

import { Calendar } from '@fullcalendar/core';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
...
var calendar = new Calendar(calendarEl, {
  plugins: [ bootstrap5Plugin ],
  themeSystem: 'bootstrap5'
});
...

Using bootstrap-icons with webpack is a bit complicated because it relies on font files that are not present in the main stylesheet. <a href='https://github.com/fullcalendar/fullcalendar-examples/tree/v5/bootstrap5' class='more-link'>See an example project that does it</a>

3rd Party Bootstrap Themes

You can use the standard Bootstrap 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, all the above steps of including the plugin files and specifying theme: 'bootstrap5' are unnecessary. If in doubt, try both methods to see which one looks better.