install FullCalendar via NPM to laravel project - node.js

Question

I am still new to Laravel and web packs.
I am trying to install FullCalendar via NPM into my Laravel project - Previously I have been working with includes from cdnjs, but I want to learn the other way. What I have done so far is:
https://fullcalendar.io/docs/initialize-es6
npm install #fullcalendar/core #fullcalendar/daygrid #fullcalendar/timegrid #fullcalendar/list
Then I updates my app.js in Laravel to
require('./bootstrap');
require('fullcalendar');
import { Calendar }from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
import listPlugin from '#fullcalendar/list';
I also updates app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#fullcalendar/core/main.css;
#fullcalendar/daygrid/main.css;
#fullcalendar/timegrid/main.css;
#fullcalendar/list/main.css;
Then I ran
npm run dev
In blade file, I re-use the code from when I was working with script file from cdnjs. I added the updated app.js file, which was compiled through npm run dev
<div id="calendar"></div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid','List'],
header: {
left: 'prev,next today',
right: 'dayGridWeek,listWeek'
},
defaultView: 'dayGridWeek',
contentHeight: 'auto',
events : [
#foreach($events as $event)
{
title : '{{ $event->title }}',
start : '{{ $event->start_event }}',
},
#endforeach
]
});
calendar.render();
});
</script>
<script src="{{ asset('js/app.js') }}"></script>
The error I get is:
I don't understand why, and I have been playing around with app.js and re-compiling it a bunch of times and changing order of my code.. nothing works. What am I missing?

Answer 1

I had similar issue, made mine work this way:
//app.js
...
import { Calendar } from '#fullcalendar/core';
window.Calendar = Calendar;
import interaction from '#fullcalendar/interaction';
window.interaction = interaction;
import dayGridPlugin from '#fullcalendar/daygrid';
window.dayGridPlugin = dayGridPlugin;
import timeGridPlugin from '#fullcalendar/timegrid';
window.timeGridPlugin = timeGridPlugin;
import listPlugin from '#fullcalendar/list';
window.listPlugin = listPlugin;
...
Then, I use it on pages that require me to render fullcalendar like so:
//somescript.js
...
var calendar = new window.Calendar($('#calendar').get(0), {
plugins: [window.interaction, window.dayGridPlugin, window.timeGridPlugin, window.listPlugin],
selectable: true,
initialView: 'dayGridMonth',
eventBorderColor: 'white',
eventClick: info => { ... },
dateClick: info => { ... },
select: info => { ... }
...
});
calendar.render();
...
For styling,
//app.scss
// Variables
#import 'variables';
// Fullcalendar
#fullcalendar/core/main.css;
#fullcalendar/daygrid/main.css;
#fullcalendar/timegrid/main.css;
#fullcalendar/list/main.css;

Answer 2

Should this line:
var calendar = new FullCalendar.Calendar(calendarEl, {
Be changed to this:
var calendar = new Calendar(calendarEl, {
Thats what I gather from looking over https://fullcalendar.io/docs/initialize-es6
Here is a good example:
https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/src/main.js