Cannot read property 'length' of undefined - Fullcalendar

Question

Uncaught TypeError: Cannot read property 'length' of undefined

highlight the error in this part of fullcalendar/main.js code

function addDefs(defs) {
    for (var _i = 0, defs_1 = defs; _i < defs_1.length; _i++)

this is my code:

yarn add @fullcalendar/core
yarn add @fullcalendar/daygrid

application.js

import moment from 'moment'
window.moment = moment
import { Calendar } from '@fullcalendar/core/';
import dayGridPlugin from '@fullcalendar/daygrid';
global.FullCalendar = require("@fullcalendar/core/");

application.scss

@import '@fullcalendar/common/main.css';
@import '@fullcalendar/daygrid/main.css';

view

<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {

        ....
    }
});

  // render the calendar
  calendar.render();
});
</script>

Your setup code looks wrong. The `global.FullCalendar...` line shouldn't be necessary. See https://fullcalendar.io/docs/initialize-es6 for an example. — ADyson, Sep 04 '20 at 11:43

score 0 · Answer 1 · answered Oct 20 '20 at 13:33

I got the same error, here are my imports

import * as Calendar from '@fullcalendar/core';
import * as dayGridPlugin from '@fullcalendar/daygrid';
import * as listPlugin from '@fullcalendar/list';
import * as interactionPlugin from '@fullcalendar/interaction';

window.FullCalendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.listPlugin = listPlugin;
window.interactionPlugin = interactionPlugin;

and I'm using it like this :

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

                                let calendar = new FullCalendar.Calendar(calendarEl, {
                                    plugins: [ dayGridPlugin ],
                                    initialView: 'dayGridMonth',
                                    initialDate: '2020-10-07',
                                    headerToolbar: {
                                        left: 'prev,next today',
                                        center: 'title',
                                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                                    },
                                    events: [
                                        {
                                            title: 'All Day Event',
                                            start: '2020-10-01'
                                        },
                                        {
                                            title: 'Long Event',
                                            start: '2020-10-07',
                                            end: '2020-10-10'
                                        },
                                        {
                                            groupId: '999',
                                            title: 'Repeating Event',
                                            start: '2020-10-09T16:00:00'
                                        },
                                        {
                                            groupId: '999',
                                            title: 'Repeating Event',
                                            start: '2020-10-16T16:00:00'
                                        },
                                        {
                                            title: 'Conference',
                                            start: '2020-10-11',
                                            end: '2020-10-13'
                                        },
                                        {
                                            title: 'Meeting',
                                            start: '2020-10-12T10:30:00',
                                            end: '2020-10-12T12:30:00'
                                        },
                                        {
                                            title: 'Lunch',
                                            start: '2020-10-12T12:00:00'
                                        },
                                        {
                                            title: 'Meeting',
                                            start: '2020-10-12T14:30:00'
                                        },
                                        {
                                            title: 'Birthday Party',
                                            start: '2020-10-13T07:00:00'
                                        },
                                        {
                                            title: 'Click for Google',
                                            url: 'http://google.com/',
                                            start: '2020-10-28'
                                        }
                                    ]
                                });

                                calendar.render();
                            });

score 0 · Answer 2 · answered Mar 30 '21 at 11:57

I'm using webpack lazy-loading to import fullcalendar.io.

const dayGridPlugin = await import('@fullcalendar/daygrid');

First, I got the same error. But then the webpack documentation gave me a hint:

Note that when using import() on ES6 modules you must reference the .default property as it's the actual module object that will be returned when the promise is resolved.

So I solved this problem using .default property

const dayGridPlugin = (await import('@fullcalendar/daygrid')).default;

score 0 · Answer 3 · answered Aug 19 '21 at 12:07

The error is there because calendarEl is null. Declare calendar before that function. After the line where you define calendarEl, wrap everything in the conditional check

var calendar;
  document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');
  if (calendarEl != null) {
     calendar = new FullCalendar.Calendar(calendarEl, {

        ....
     }
   }
});

score 0 · Answer 4 · answered Dec 15 '21 at 09:50

I had the same error when introducing Webpack to already working application which worked with some older version of Fullcalendar. Some name of options of the library from npm have changed so I had to update them (like "defaultView" to "initialView"). And what caused the above-mentioned error was line:

plugins: ["interaction", "dayGrid", "timeGrid", "list"],

which I had to change to:

plugins: [interaction, dayGrid, timeGrid, list],

Cannot read property 'length' of undefined - Fullcalendar

4 Answers4