我对fullcalendar有一个问题。
因此，当我在本地工作时，我的日历显示完美显示，但是第二个我上传了它，日历未显示。
我有一些控制台问题，我不知道如何解决。所有的帮助将不胜感激。
控制台错误：
- 无法加载资源：服务器以403的状态响应(禁止(
- 未介绍的参考文献：$未定义
- 未介绍的参考：未定义jQuery
- 无法加载资源：服务器以403的状态响应(禁止(
这些jQuery文件都在我的大多数页面上都调用，这是唯一一个具有控制台错误的文件。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.8.2/fullcalendar.css' />
<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>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!-- CSS -->
<link rel="shortcut icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link rel="icon" type="image" href="sources/icons/favicon.png">
<link rel="manifest" href="manifest.json">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.0/sweetalert2.all.min.js"></script>
<script>
$(document).ready(function() {
$('#cals').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: true,
events: [
{
title: 'Mechanics Practical',
start: '2018-03-01'
},
{
title: 'Test Week',
start: '2018-02-07',
end: '2018-02-10'
},
{
id: 999,
title: 'Study Session',
start: '2018-03-09T16:00:00'
},
{
id: 999,
title: 'IT Report',
start: '2018-02-16T16:00:00'
},
{
title: 'Task Due',
start: '2018-02-12T10:30:00',
end: '2018-02-12T12:30:00'
},
{
title: 'Study Session',
start: '2018-03-12T12:00:00'
},
{
title: 'Mechanics Task',
start: '2018-02-13T07:00:00'
}
]
});
});
</script>
<style type='text/css'>
@import url('https://fonts.googleapis.com/css?family=Questrial');
body {
text-align: center;
font-size: 16px;
font-family: "Questrial";
}
#cals {
width: 980px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<nav id="w7" role="navigation" class="grey darken-3">
<div class="container nav-wrapper">
<a class="brand-logo white-text" href="dash.html"><img src="images/logo/small-sans.png" alt="Enovation Logo" class="dash-logo"></a>
<div id="w7-collapse">
<ul id="w8" class="right hide-on-med-and-down">
<li><a href="dash.html" class="white-text">Home</a></li>
<li><a href="profile.html" class="white-text">Profile</a></li>
<li><a href="index.html" class="btn white-text">Logout</a></li>
</ul>
<ul id="slide-out" class="side-nav fixed grey darken-3">
<br>
<li><a href="dash.html" class="btn collapsible-header grey darken-2 white-text">Dashboard</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="btn collapsible-header grey darken-2 white-text">Profile</a>
<div class="collapsible-body grey darken-1">
<ul>
<li><a href="profile.html" class="white-text">View Profile</a></li>
<li><a href="edit-profile.html" class="white-text">Edit Profile</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="btn collapsible-header grey darken-2 white-text">Learners</a>
<div class="collapsible-body grey darken-1">
<ul>
<li><a href="active.html" class="white-text">View Active Learners</a></li>
<li><a href="all.html" class="white-text">View All Learners</a></li>
<li><a href="pending.html" class="white-text">View Pending Learners</a></li>
<li><a href="providers.html" class="white-text">View Service Providers</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="btn collapsible-header grey darken-2 white-text">Reports</a>
<div class="collapsible-body grey darken-1">
<ul>
<li><a href="reports.html" class="white-text">Learners Pass/Fail</a></li>
<li><a href="reports.html" class="white-text">Training Events</a></li>
<li><a href="reports.html" class="white-text">Attendance</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="btn collapsible-header grey darken-2 white-text" href="cal.html">Events Calendar</a></li>
<li><a href="venue.html" class="btn collapsible-header grey darken-2 white-text">Training Centres</a></li>
<li><a class="btn teal pulse" onclick="myAlert()">Notifications</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<main>
<div class="container">
<div class="section">
<div id='cals'></div>
</div>
</div>
</main>
<script>
function myAlert() {
swal({
title: "New message",
text: "Class has been cancelled, submit essays online.",
icon: "info",
button: "Dismiss",
});
}
</script>
</body>
</html>
不要使用fullcalendar.io作为JS和CSS文件的来源。它不是作为CDN设计的，也没有保证对文件的可用性长期 - 随着版本过时或重新组织网站可能会消失。
。实际上，如果您在浏览器中访问https://fullcalendar.io/js/，它会为您提供具体的建议，而不必做自己的事情。它说：
禁止
无法发送此资源。
如果您尝试在FullCalendar.io上热链接到JS或CSS文件，请改用CDN。有关更多详细信息，请参见下载页面。
因此，您从请求jQuery库中获得的"禁止"结果很可能是因为服务器已检测到您正在尝试从实时域中访问它。
下载页面建议您从https://cdnjs.com/libraries/fullcalendar
中获取文件中获取文件。顺便说一句，您可能应该考虑使用较新的版本，2.1现在已经很旧(最新版本为3.8时(。