JavaScript fullCalendar 插件读取 'applyAll' 在 gcal.js 中未定义

Question

我正在尝试使用 JavaScript 中 fullcalendar 插件的 google 日历模块。当我尝试加载 google 日历时，控制台显示：

Uncaught TypeError: Cannot read property 'applyAll' of undefined

错误发生在 gcal.js 的第 23 行：

21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;

我添加 returns $.fullCalendar 为未定义的 console.log()，然后 fc.applyAll 也返回未定义。我对 JS 的了解还不足以完全理解这个文件中发生的事情，我不确定哪里出了问题。

这是我的 html:

<head>
  <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
  <script src='fullcalendar/lib/jquery.min.js'></script>
  <script src='fullcalendar/gcal.js'></script>
  <script src='fullcalendar/lib/moment.min.js'></script>
  <script src='fullcalendar/fullcalendar.js'></script>
  <link href='style.css' rel='stylesheet' />
</head>
<body>
  <div id='calendar'></div>
</body>

我的JavaScript:

    $(document).ready(function() {
      $('#calendar').fullCalendar({
        googleCalendarApiKey: 'my-api-key',
        events: {
          googleCalendarId: 'my-calendar-id'
        }
      });
    });

我已经下载了最新版本的gcal.js（文件似乎有问题，网站提供了link最新版本）。

Answer 1

问题在于您导入库文件的顺序。

fullcalendar 是一个 jQuery 插件，这通常意味着它将在 jQuery 对象上以属性结束，例如$.fullCalendar。

现在，gcal 文件依赖于属性存在，因此它可以访问其中的 .applyAll 方法，但是，您在加载之前加载 gcal.js fullcalendar.js.

如果您像这样更改顺序，它可以正常工作。

<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>

根据经验，首先尝试放置您知道没有依赖性（它们不依赖于另一个库）的文件。

JavaScript fullCalendar 插件读取 'applyAll' 在 gcal.js 中未定义

JavaScript fullCalendar plugin reading 'applyAll' as undefined in gcal.js

javascript

jquery

fullcalendar