FullCalendar 类型错误：$(...).fullCalendar 不是函数

JS

FullCalendar 类型错误：$(...).fullCalendar 不是函数

在进行网页开发时，经常会遇到需要使用日历功能的情况。而 FullCalendar 是一个非常流行的开源日历插件，它为开发者提供了丰富的功能和灵活的配置选项。然而，有时候我们可能会遇到一个常见的错误：$(...).fullCalendar 不是函数。

这个错误通常发生在我们尝试调用 fullCalendar() 方法时。它的原因往往是因为我们的代码中没有正确引入 FullCalendar 插件或者引入的顺序不正确，导致浏览器无法识别 fullCalendar() 方法。

解决这个问题的方法有很多种，下面我们将介绍几种常见的解决方案。

检查插件引入

首先，我们需要确保我们已经正确引入了 FullCalendar 插件。在头部或者底部的 HTML 文件中添加以下代码：

html
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.0/fullcalendar.min.CSS" />
<script src="https://cdnJS.cloudflare.com/Ajax/libs/jquery/3.5.1/jquery.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/moment.JS/2.24.0/moment.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.0/fullcalendar.min.JS"></script>

这段代码会引入 FullCalendar 插件以及其依赖的 jQuery 和 Moment.JS 库。确保文件路径正确，并且没有其他与 FullCalendar 冲突的插件。

检查引入顺序

除了检查插件是否正确引入外，我们还需要确保引入的顺序是正确的。通常，我们应该先引入 jQuery，然后是 Moment.JS，最后是 FullCalendar。如果引入的顺序不正确，也会导致 $(...).fullCalendar 不是函数的错误。

请确保你的代码中的引入顺序如下：

html
<script src="https://cdnJS.cloudflare.com/Ajax/libs/jquery/3.5.1/jquery.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/moment.JS/2.24.0/moment.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.0/fullcalendar.min.JS"></script>

检查代码调用

最后，我们需要检查我们调用 fullCalendar() 方法的代码是否正确。通常，我们应该在文档加载完成后再调用 fullCalendar() 方法，以确保 DOM 已经完全加载。

以下是一个正确调用 fullCalendar() 方法的示例代码：

Javascript
$(document).ready(function() {
    $('#calendar').fullCalendar({
        // 配置选项
    });
});

在这个示例中，我们使用了 jQuery 的 $(document).ready() 方法来确保文档加载完成后再执行代码。然后，我们选择一个具有 id 为 "calendar" 的元素，并调用 fullCalendar() 方法来初始化日历。

通过检查插件引入、引入顺序以及代码调用的正确性，我们应该能够解决 FullCalendar 类型错误：$(...).fullCalendar 不是函数 的问题。希望这篇文章对你有所帮助！