Question

我遇到FullCalendar问题。

因此，在本地工作时，我的日历显示完美但是第二次我实时上传，日历不会显示。

我有一些控制台问题，我不知道如何解决。任何和所有帮助将不胜感激。

控制台错误：

无法加载资源：服务器响应状态为403（禁止）
未捕获的ReferenceError：$未定义
未捕获的ReferenceError：未定义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>

Answer 1

不要使用fullcalendar.io作为JS和CSS文件的来源。它不是作为CDN设计的，并且不保证长期提供文件 - 随着版本过时或网站重新组织，它们可能会消失。

事实上，如果您在浏览器中访问https://fullcalendar.io/js/，它会为您提供具体建议，而不是执行您正在执行的操作。它说：

<强>禁止

无法发送此资源。

如果您尝试在fullcalendar.io上链接到JS或CSS文件，请改用CDN。有关详细信息，请参阅下载页面。

更有可能是＆＃34;禁止＆＃34;您从请求jQuery库中得到的结果是因为服务器检测到您正在尝试从您的实时域名进行热链接。

下载页面建议您从https://cdnjs.com/libraries/fullcalendar

处提供的文件中获取文件

顺便说一下，你应该考虑使用更新的版本，2.1现在已经很老了（在撰写本文时最新版本是3.8）。

FullCalendar不会在实时网站上显示

1 个答案: