Premium Fullcalendar not picking up Bootstrap5 theme

Question

This is what i'm seeing (theme does not look to be applied)

This is how i would expect it to look

I can get the bootstrap theme to work on the standard edition of fullcalendar, just not the premium version

I have added this line to the init of the calendar

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap5',
    timeZone: 'UTC',
    editable: true,
    initialView: 'resourceTimelineDay',
    initialDate: '2024-06-05',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimeGridDay'
    },
    resourceAreaHeaderContent: 'Rooms',
    views: {
      resourceTimelineDay: { buttonText: 'timeline' },
      resourceTimeGridDay: { buttonText: 'timeGrid' }
    },
    events: [
      {
        resourceId: 'a',
        title: 'Timed Event',
        start: '2024-06-05T16:00:00+00:00'
      },
      {
        resourceId: 'b',
        title: 'Conference',
        start: '2024-06-05'
      },
      {
        resourceId: 'c',
        title: 'Meeting',
        start: '2024-06-05T10:30:00+00:00',
        end: '2024-06-05T12:30:00+00:00'
      },
      {
        resourceId: 'a',
        title: 'Lunch',
        start: '2024-06-05T12:00:00+00:00'
      }
    ],
    resources: [
      {
        id: 'a',
        title: 'Auditorium A'
      },
      {
        id: 'b',
        title: 'Auditorium B'
      },
      {
        id: 'c',
        title: 'Auditorium C'
      },
      {
        id: 'd',
        title: 'Auditorium D'
      }
    ]
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<div id='calendar'></div>

Answer 1

The fullCalendar bootstrap 5 theme documentation says:

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'.

Your code has some issues:

• You've missed the "include the JavaScript plugin" step. i.e. you also have to add fullCalendar's bootstrap 5 plugin file as well. Even though you're using a global bundle file, that plugin isn't included in it. See the plugin index for details of all plugins, and CDN links to them.

• You also forgot to include the bootstrap icons file mentioned in the same documentation.

• The bootstrap JS file isn't technically required for this and so isn't in my demo below - although you may wish to use it yourself if you're using other bootstrap functionality in your page. (Note also that in your example you also had a version mismatch between the bootstrap CSS and JS files you'd loaded, which is a recipe for compatibility issues.)

Here's a working version:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap5',
    timeZone: 'UTC',
    editable: true,
    initialView: 'resourceTimelineDay',
    initialDate: '2024-06-05',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimeGridDay'
    },
    resourceAreaHeaderContent: 'Rooms',
    views: {
      resourceTimelineDay: { buttonText: 'timeline' },
      resourceTimeGridDay: { buttonText: 'timeGrid' }
    },
    events: [
      {
        resourceId: 'a',
        title: 'Timed Event',
        start: '2024-06-05T16:00:00+00:00'
      },
      {
        resourceId: 'b',
        title: 'Conference',
        start: '2024-06-05'
      },
      {
        resourceId: 'c',
        title: 'Meeting',
        start: '2024-06-05T10:30:00+00:00',
        end: '2024-06-05T12:30:00+00:00'
      },
      {
        resourceId: 'a',
        title: 'Lunch',
        start: '2024-06-05T12:00:00+00:00'
      }
    ],
    resources: [
      {
        id: 'a',
        title: 'Auditorium A'
      },
      {
        id: 'b',
        title: 'Auditorium B'
      },
      {
        id: 'c',
        title: 'Auditorium C'
      },
      {
        id: 'd',
        title: 'Auditorium D'
      }
    ]
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<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"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js"></script>
<div id='calendar'></div>

N.B. I do think the documentation could make the requirement for the extra plugin clearer. The "Using a bundle" part of the documentation page in particular does not (at the time of writing) show the use of the extra JS file, although the live demo does, if you click through to its CodePen source.