1

I try to use the "bootstrap5" theme on the excellent fullCalendar 6.

I followed the documentation.

My config is :

const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridDay',
                locale: 'fr',
                themeSystem: 'bootstrap5',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },

The page source looks like that (this picture to show that everything is present)

enter image description here

enter image description here But the displayed theme is the standard one :

enter image description here

What can be my error ?

Improve this question
5
  • Are you using fullcalendar 6? Did you follow all the further instructions mentioned in the documentation at fullcalendar.io/docs/bootstrap5? You didn't provide details or a minimal reproducible example of your issue, so it's difficult to identify what could be wrong.
    – ADyson
    Commented Feb 4 at 10:44
  • thanks Adyson for your answer. I updated the initial question
    – Dom
    Commented Feb 4 at 11:02
  • It's a little difficult to tell still, because that's not just the standard theme in your picture - you seem to have included some additional colours, at the very least. codepen.io/ADyson82/pen/PoLaYYg shows what it should look like with bootstrap 5. It's easier to tell if you're using that theme, if you show us a bigger screenshot of your week view, including the day headings etc - they are distinctly different from the standard theme (as shown here: codepen.io/ADyson82/pen/eYjromb)
    – ADyson
    Commented Feb 4 at 18:33
  • 1
    Also, on closer inspection the documentation I think misses out a step. If you look at the provided demo on the fullCalendar website, it also includes an extra JS file, which describes itself as a fullcalendar bootstrap plugin: cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/… . If you include that file then you also get the blue buttons and subtly different icons: codepen.io/ADyson82/pen/RwdJbNE
    – ADyson
    Commented Feb 4 at 18:40
  • Thanks ADyson, you were right. I added this extra JS file and now it is OK, the bootstrap theme is applied.
    – Dom
    Commented Feb 10 at 10:31
Related questions
8494
What does "use strict" do in JavaScript, and what is the reasoning behind it?
6290
What is the difference between "let" and "var"?
3700
Set cellpadding and cellspacing in CSS?
Load 5 more related questions Show fewer related questions

0

Reset to default