Bootstrap 4 Theming

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

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 FontAwesome stylesheet must be loaded (more info). Example:

<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>

Then, load a FullCalendar bundle and initialize the calendar:

<script src='fullcalendar/dist/index.global.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  themeSystem: 'bootstrap'
});
...
</script>

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/bootstrap

Then, install the packages for Bootstrap and FontAwesome:

npm install --save bootstrap@4 @fortawesome/fontawesome-free

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 '@fortawesome/fontawesome-free/css/all.css'; // needs additional webpack config!

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

Using fontawesome-free 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/main/bootstrap4' 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: 'bootstrap' are unnecessary. If in doubt, try both methods to see which one looks better.