Fullcalendar - Cannot read property 'DayGrid' of undefined

Question

I'd like to use the Fullcalendar 4.2.0 Plugin to my website, but I get an error message:

Uncaught TypeError: Cannot read property 'DayGrid' of undefined

The included js files:

<script src="include/plugins/fullcalendar-4.2.0/packages/core/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/core/locales-all.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/timegrid/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/interaction/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/bootstrap/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/daygrid/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/list/main.min.js"></script>

The javascript caller code:

<script>
var calendar;
$(document).ready(function() {
  var calendarEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
    defaultView: 'timeGridWeek',
    locale: 'hu',
    height: "auto"
  });
  calendar.render();
});

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

I tried this code more hosting providers, and It works well, except one. Unfortunately that is the main hosting provider. They do not know what the problem is.

I haven't found a solution, on any site.

Please help!

The full error message is:

Uncaught TypeError: Cannot read property 'DayGrid' of undefined
    at n [as constructor] (main.min.js:20)
    at new n (main.min.js:20)
    at CalendarComponent.renderView (main.min.js:6232)
    at CalendarComponent.render (main.min.js:6184)
    at CalendarComponent.Component.receiveProps (main.min.js:3887)
    at Calendar.renderComponent (main.min.js:6795)
    at Calendar.executeRender (main.min.js:6755)
    at Calendar.render (main.min.js:6577)
    at HTMLDocument.<anonymous> (calendar.php:45)
    at l (jquery-3.3.1.min.js:2)

Which line of code throws the error, exactly? Are any of your files failing to load? e.g. perhaps one of the JavaScript files is not loading. Check your browser's Network tool while the main page is loading and watch for any problems with loading the JavaScript etc. — ADyson, Feb 10 '20 at 09:13
I wrote the full error message to the main comment. All javascript files are loaded. — krida, Feb 10 '20 at 16:39

score 2 · Accepted Answer · answered Feb 10 '20 at 22:56

I managed to reproduce your error in this demo: https://codepen.io/ADyson82/pen/KKppyxq

Since the stack trace shows that the error occurs in "timegrid.min.js" it was easy to reason that the timeGrid plugin appears to rely on the dayGrid plugin. Sure enough, changing the order that the files are loaded in so that dayGrid is loaded before timeGrid resolves the issue.

So simply order your files like this:

<script src="include/plugins/fullcalendar-4.2.0/packages/core/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/core/locales-all.min.js"</script>
<script src="include/plugins/fullcalendar-4.2.0/packages/daygrid/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/timegrid/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/interaction/main.min.js"</script>
<script src="include/plugins/fullcalendar-4.2.0/packages/bootstrap/main.min.js"></script>
<script src="include/plugins/fullcalendar-4.2.0/packages/list/main.min.js"></script>

Demo: https://codepen.io/ADyson82/pen/QWbbOJv

I also found that this dependency is actually mentioned in the fullCalendar documentation here: https://fullcalendar.io/docs/timegrid-view (although annoyingly it's not mentioned in the plugin list at https://fullcalendar.io/docs/plugin-index).

Fullcalendar - Cannot read property 'DayGrid' of undefined

1 Answers1

Linked