全日历不是一个函数(ASP.NET MVC)

我尝试使用这个插件

插件

这是我在视图中的代码

<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<div id="calendar" style="height: 80%; width: 100%">
</div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>

但是当我运行网站时，我有这个错误

未捕获的类型错误： $(...)。fullCalendar 不是一个函数在 HTMLDocument。(索引：134) 在 J (fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js:2) at Object.fireWith [as resolveWith] (fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js:2) at Function.ready (fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js:2) at HTMLDocument.J (fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js:2)

我该如何解决？

尝试了以下内容，其工作正常：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.css" />
</head>
<body>
<div id="calendar" style="height: 80%; width: 100%">
</div>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true 
});
});
</script>
</body>
</html>

确保你没有加载两个版本的jquery？顺便说一句，您使用的是相当旧版本的全日历。

尽管您不应该真正将 fullcalendar.io 站点用作CDN - 它不打算用作CDN，并且不能保证文件将保留在原位，但它应该与您提供的链接一起使用：

$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});

<link href="https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.css" rel="stylesheet" />
<script src='https://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<div id="calendar" style="height: 80%; width: 100%">
</div>

请注意，我使用 https 而不是 http 主要是因为 SO 是 https，您无法从 https 页面链接到 http 资源。你遇到同样的问题并非不可能。另请注意，在您的示例中，我使用了 fullCalendar 中的 CSS 而不是本地引用(因为显然我无法访问它)。

还要检查您的页面是否确实正确(您可以通过查看浏览器的网络选项卡来查看任何未正确加载的链接)，并确保您没有多次加载任何相同的库，或类似的东西。

没有明显的理由说明您的示例中的代码不应该工作，因此我上面概述的其他内容几乎肯定会干扰。

附言作为一个长期的解决方案，我建议使用您站点中 https://cdnjs.com/libraries/fullcalendar 的文件，因为这些文件保证不会更改，并且作为适当的 CDN，它将具有足够的带宽等。您还可以在同一站点上找到momentJS和jQuery库。

以下内容对我有用。我相信.js时刻是必需的。完整日历类型错误： $(...)。fullCalendar 不是一个函数

安装时刻.js从 nuget 或手动添加。
呼叫时刻.js在全日历之前.js。
确保按顺序调用 js 文件：
1. Jquery
2. Jquery-UI
3. 瞬间.js
4. 完整日历.js

相关内容

最新更新

热门标签：