JavaScript fullCalendar 插件将"applyAll"读作 gcal 中未定义的.js

我试图在JavaScript中使用fullcalendar插件的谷歌日历模块。当我尝试加载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;

我添加的console.log()返回$。fullCalendar未定义，然后fc。applyAll也返回undefined。我的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(文件似乎有问题，网站提供了最新版本的链接)。

问题出在导入库文件的顺序上。

fullcalendar是一个jQuery插件，这通常意味着它最终将作为jQuery对象的属性，例如$.fullCalendar。

现在，gcal文件依赖于该属性在那里，所以它可以访问它的.applyAll方法，然而，你在加载fullcalendar.js之前加载gcal.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>

作为一个经验法则，试着把你知道没有依赖关系的文件(它们不依赖于其他库)放在前面。

相关内容

最新更新

热门标签：