【发布时间】：2018-02-07 19:18:50
【问题描述】：
我在使用 FullCalendar 时遇到问题。
因此，在本地工作时，我的日历显示完美，但是当我实时上传它时，日历不显示。
我有一些控制台问题，我不知道如何解决。我们将不胜感激。
控制台错误：
- 加载资源失败：服务器响应状态为 403 (Forbidden)
- 未捕获的 ReferenceError：$ 未定义
- 未捕获的 ReferenceError：未定义 jQuery
- 加载资源失败：服务器响应状态为 403 (Forbidden)
这些 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>
【问题讨论】：
标签： jquery fullcalendar