FullCalendar不会在实时网站上显示 [英] FullCalendar doesn't display on live site
本文介绍了FullCalendar不会在实时网站上显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，在本地工作时，我的日历完美显示，但第二个实际上传，日历不显示。
我有几个控制台问题，我不知道如何解决。
控制台错误：
这些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 =快捷图标href =favicon.ico/>
< link href =https://fonts.googleapis.com/icon?family=Material+Icons =stylesheet/>
< link href =css / materialize.csstype =text / css =stylesheetmedia =screen，projection/>
< link href =css / style.csstype =text / css =stylesheetmedia =screen，projection/>
< link rel =icontype =imagehref =sources / icons / favicon.png>
< link rel =manifesthref =manifest.json>
< script src =https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.0/sweetalert2.all.min.js>< / script>
< script>
$（document）.ready（function（）{
$ b $（'＃cals'）。fullCalendar（{
header：{
left ：'prev，next today'，
center：'title'，
right：'month，agendaweek，agendaDay'
}，
defaultView：'month'，
可编辑：true，
事件：[
{
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：'任务到期'，
开始：'2018-02-12T10：30：00'，
结束：'2018-02-12T12：30 ：00'
}，
{
标题：'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 =w7role =navigationclass =grey darken-3>
< div class =container nav-wrapper>
< a class =brand-logo white-texthref =dash.html>< img src =images / logo / small-sans.pngalt =Enovation Logoclass = 划线标志 >< / A>
< div id =w7-collapse>
< ul id =w8class =right hide-on-med-and-down>
< li>< a href =dash.htmlclass =white-text>主页< / a>< / li>
< li>< a href =profile.htmlclass =white-text>个人资料< / a>< / li>
< li>< a href =index.htmlclass =btn white-text>注销< / a>< / li>
< / ul>
< ul id =slide-outclass =side-nav fixed gray darken-3>
< br>
< li>< a href =dash.htmlclass =btn collapsible-header gray darken-2 white-text> Dashboard< / a>< / li>
< li class =no-padding>
< ul class =collapsible collapsible-accordion>
< li>
< a class =btn collapsible-header gray darken-2 white-text>个人资料< / a>
< div class =collapsible-body grey darken-1>
< ul>
< li>< a href =profile.htmlclass =white-text>查看个人资料< / a>< / li>
< li>< a href =edit-profile.htmlclass =white-text>编辑个人资料< / a>< / li>
< / ul>
< / div>
< / li>
< / ul>
< / li>
< li class =no-padding>
< ul class =collapsible collapsible-accordion>
< li>
< a class =btn collapsible-header gray darken-2 white-text>学习者< / a>
< div class =collapsible-body grey darken-1>
< ul>
< li>< a href =active.htmlclass =white-text>查看有效学习者< / a>< / li>
< li>< a href =all.htmlclass =white-text>查看所有学习者< / a>< / li>
< li>< a href =pending.htmlclass =white-text> View Pending Learners< / a>< / li>
< li>< a href =providers.htmlclass =white-text>查看服务提供商< / a>< / li>
< / ul>
< / div>
< / li>
< / ul>
< / li>
< li class =no-padding>
< ul class =collapsible collapsible-accordion>
< li>
< a class =btn collapsible-header gray darken-2 white-text>报告< / a>
< div class =collapsible-body grey darken-1>
< ul>
< li>< a href =reports.htmlclass =white-text>学习者通过/失败< / a>< / li>
< li>< a href =reports.htmlclass =white-text>培训活动< / a>< / li>
< li>< a href =reports.htmlclass =white-text>考勤< / a>< / li>
< / ul>
< / div>
< / li>
< / ul>
< / li>
< li>< a class =btn collapsible-header grey darken-2 white-texthref =cal.html>活动日历< / a>< / li>
< li>< a href =venue.htmlclass =btn collapsible-header grey darken-2 white-text>培训中心< / a>< / li>
< li>< a class =btn teal pulseonclick =myAlert（）>通知< / a>
< / li>
< / ul>
< / div>
< / div>
< / nav>
< / div>
< main>
< div class =container>
< div class =section>
< div id ='cals'>< / div>
< / div>
< / div>
< / main>
< script>
函数myAlert（）{
swal（{
title：新消息，
文本：类已被取消，在线提交论文。，
图标：info，
按钮：关闭，
}）;
}
< / script>
< / body>
< / html>
解决方案
不要使用fullcalendar.io作为源你的JS和CSS文件。它不是CDN的设计，也不保证文件的长期可用性 - 它们可能会随着版本过时或重新组织而消失。
事实上，如果您在浏览器中访问 https://fullcalendar.io/js/ ，它会为您提供特定建议不要做你在做什么。它说：
禁止
无法发送。
如果您尝试将hotlink链接到fullcalendar.io上的JS或CSS文件，请改为使用CDN。请参阅下载页面以获取更多详细信息。
因此，请求jQuery库的禁止结果很可能是因为服务器检测到您试图从您的活动域名热链接到它。
<另外，你应该考虑使用一个更新的版本，2.1现在已经很老了（写作时最新版本是3.8）。
I'm having an issue with FullCalendar.
So while working locally, my calendar displays perfectly however the second I upload it live, the calendar doesn't display.
I have a few console issues that I have no clue how to resolve. Any and all help will be appreciated.
Console errors:
- Failed to load resource: the server responded with a status of 403 (Forbidden)
- Uncaught ReferenceError: $ is not defined
- Uncaught ReferenceError: jQuery is not defined
- Failed to load resource: the server responded with a status of 403 (Forbidden)
These jQuery files are called in on most of my pages and this is the only one with console errors.
<!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>
解决方案
Don't use fullcalendar.io as the source of your JS and CSS files. It's not designed as a CDN and no guarantees are made about availability of files long-term - they might disappear as versions go out of date or the site is re-organised.
In fact if you visit https://fullcalendar.io/js/ in your browser it gives you specific advice not to do what you're doing. It says:
Forbidden
This resource could not be sent.
If you are attempting to hotlink to a JS or CSS file on fullcalendar.io, use the CDN instead. See the downloads page for more details.
So more than likely the "Forbidden" result you're getting from requesting the jQuery library is because the server has detected that you're trying to hotlink to it from your live domain.
The downloads page recommends that you fetch the files from the ones available at https://cdnjs.com/libraries/fullcalendar
As an aside, you should probably consider using a newer version, 2.1 is quite old now (latest is 3.8 at the time of writing).
这篇关于FullCalendar不会在实时网站上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
