How to use FullCalendar with Laravel Mix

Question

I have installed the Fullcalendar library packages using npm.

npm i --save @fullcalendar/core 
    @fullcalendar/interaction @fullcalendar/daygrid 
    @fullcalendar/timegrid @fullcalendar/list @fullcalendar/bootstrap

I've also included it in the app.js.

require('@fullcalendar/core');
require('@fullcalendar/bootstrap');
require('@fullcalendar/list');
require('@fullcalendar/timegrid');
require('@fullcalendar/daygrid');
require('@fullcalendar/interaction');

However when trying to create a calendar with the following code:

var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
    plugins: [ 'interactionPlugin', 'bootstrapPlugin', 'dayGridPlugin', 'timeGridPlugin', 'listPlugin'],
});

I get the error...

Uncaught ReferenceError: Calendar is not defined at HTMLDocument.<anonymous> on new Calendar

.

What am I doing wrong?

My webpack.mix.js looks like this:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css').version();

---

Edit:

After setting my app.js to:

window.FullCalendar = require('@fullcalendar/core');
window.bootstrapPlugin = require('@fullcalendar/bootstrap');
window.interactionPlugin = require('@fullcalendar/interaction');
window.listPlugin = require('@fullcalendar/list');
window.timeGridPlugin = require('@fullcalendar/timegrid');
window.dayGridPlugin = require('@fullcalendar/daygrid');

I now get this error: Uncaught TypeError: Cannot read property 'length' of undefined on

calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [bootstrapPlugin, interactionPlugin, listPlugin, timeGridPlugin, dayGridPlugin],
locale : 'pt-br',
})

Answer 1

Some time has passed but I faced the same problem today and I've resolved.

1. Install dependencies:

    npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

2. Import in javascript: NOTE: I've used a separate file called calendar.js and put it in resources/js/calendar.js, so i've added this to app.js

require('./calendar');

3. Edit file calendar.js

    import { Calendar } from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import listPlugin from '@fullcalendar/list';
    import itLocale from '@fullcalendar/core/locales/it'; //italian language and config

4. Edit the file adding (after the import section)

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

    let calendar = new Calendar(calendarEl, {
        locale: itLocale,
        plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        // go ahead with other parameters
    });

    calendar.render();
});

5. In my view file:

<div id="calendar"></div>

6. In my footer section:

<script src="{{ asset('js/app.js') }}"></script>

7. Run npm run dev (or prod or watch, it depends)

---

Final note: I used DOMContentLoaded because my app.js script it's in footer. I don't know if this works also if is placed in head tag.