FullCalendar with ES6 Build System: “initialView” and “headerToolbar” ignored

I’m moving my script tags based FullCalendar setup to an ES6 build system one and am facing a weird bug that I can’t fix.

So I import the FullCalendar class and plugins in my main-calendar.js file like this:

import { Calendar } from '@fullcalendar/core';
import listPlugin from "@fullcalendar/list"
import dayGridPlugin from "@fullcalendar/daygrid"
import timeGridPlugin from "@fullcalendar/timegrid"

then, in the same file, I create my calendar object like this:

    var calendar = new Calendar(calendarEl, {

        plugins: [listPlugin, dayGridPlugin, timeGridPlugin],

        initialView: "list",

        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        }

    })

a calendar is rendered BUT:

  • headerToolbar is always ignored. I can add any value to left, center and right but what will be rendered will always be a date on the left and today+prev,next on the right
  • initialView also always ignored
  • the only thing i can change is the initial view by changing the order of the plugins in plugins property array. I can switch between timeGridPlugin and dayGridPlugin and it will change the initial view. listPlugin however, if put first in the array doesn’t change anything.

It’s a Laravel website using Webpack/Laravel mix. My Webpack config:

mix.js('resources/js/Calendar/main-calendar.js', 'public/js')
mix.postCss('node_modules/@fullcalendar/core/main.css', 'public/css/fullcalendar/core.css')
    .postCss('node_modules/@fullcalendar/daygrid/main.css', 'public/css/fullcalendar/daygrid.css')
    .postCss('node_modules/@fullcalendar/timegrid/main.css', 'public/css/fullcalendar/timegrid.css')
    .postCss('node_modules/@fullcalendar/list/main.css', 'public/css/fullcalendar/list.css')
mix.sass('resources/sass/calendar.scss', 'public/css')

I’m kindof clueless. I got no errors in my Chrome console and I’ll have to rollback to a script tags approach if I can’t fix this.