Fullcalendar - 无法读取未定义的属性“DayGrid”答案

【问题标题】：Fullcalendar - Cannot read property 'DayGrid' of undefinedFullcalendar - 无法读取未定义的属性“DayGrid”
【发布时间】：2020-05-25 04:37:07
【问题描述】：

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

未捕获的类型错误：无法读取未定义的属性“DayGrid”

包含的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)

【问题讨论】：

究竟是哪一行代码引发了错误？您的任何文件是否无法加载？例如也许其中一个 JavaScript 文件没有加载。在加载主页时检查浏览器的网络工具，并注意加载 JavaScript 等是否存在任何问题。
我将完整的错误消息写到主评论中。已加载所有 javascript 文件。

标签： javascript html fullcalendar hosting fullcalendar-4

【解决方案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 的插件列表中提及）。

【讨论】：