javascript - Fullcalendar - 无法读取未定义的属性 'DayGrid'

Question

我想在我的网站上使用 Fullcalendar 4.2.0 插件，但收到错误消息:

Uncaught TypeError: Cannot read property 'DayGrid' of undefined

包含的js文件:

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

JavaScript 调用者代码:

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

我尝试了更多托管提供商的代码，它运行良好，除了一个。不幸的是，这是主要的托管提供商。他们不知道问题是什么。

我在任何网站上都没有找到解决方案。

请帮忙!

完整的错误消息是:

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)

Answer 1

我成功地在此演示中重现了您的错误:https://codepen.io/ADyson82/pen/KKppyxq

由于堆栈跟踪显示错误发生在“timegrid.min.js”中，因此很容易推断出 timeGrid 插件似乎依赖于 dayGrid 插件。果然，更改文件加载的顺序，以便在 timeGrid 之前加载 dayGrid 可以解决问题。

所以只需像这样订购您的文件:

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

演示:https://codepen.io/ADyson82/pen/QWbbOJv

我还发现这里的 fullCalendar 文档实际上提到了这种依赖关系:https://fullcalendar.io/docs/timegrid-view (尽管令人烦恼的是它没有在 https://fullcalendar.io/docs/plugin-index 的插件列表中提及)。