Search code examples
javascripthtmlfullcalendarhostingfullcalendar-4

Fullcalendar - Cannot read property 'DayGrid' of undefined

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)
Solution

  • 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).