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 toleft
,center
andright
but what will be rendered will always be a date on the left and today+prev,next on the rightinitialView
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 betweentimeGridPlugin
anddayGridPlugin
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.