CODEWITHSUNDEEP
jqueryfullcalendar
Enovation
Enovation

Reputation: 11

FullCalendar doesn't display on live site

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:

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>

Upvotes: 1

Views: 1273

Answers (1)

ADyson
ADyson

Reputation: 62006

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).

Upvotes: 2

Related Questions