CODEWITHSUNDEEP
javascripthtmlcssfullcalendar
Elad Karni
Elad Karni

Reputation: 145

FullCalendar displaying without css or any errors

So I'm trying to get full calendar installed on my website, and after a few issues, I managed to get to a point where I have no errors but the calendar itself isn't displaying correctly (like it doesn't have css).

I checked, and as far as I can tell, all of the files that need to be referenced are.

Any help would be greatly appreciated!

   <!DOCTYPE html><head>    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link href="src/bootstrap/css/bootstrap.min.css" rel="stylesheet">



<!-- FullCalender files references -->
<script src="src/jquery.js"></script>
<script src='src/moment.min.js'></script>
<script src='src/fullcalendar.min.js'></script>
<script src="src/gcal.js"></script>

<!-- Custom styles for this template -->
<link href="components/style.css" rel="stylesheet">
<link src="src/fullcalendar.min.css" rel="stylesheet">
<link src="src/fullcalendar.print.css"  rel="stylesheet">ipt>

    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                googleCalendarApiKey: 'KEY',
                events: {
                    googleCalendarId: '[email protected]'
                }
            });
        });
    </script><title>Western PA ARML</title></head>    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">Western PA ARML</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <!--<li><a href="index.html">Home</a></li> -->
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="join.html">Join the Team</a></li>
            <li><a href="coaches.html">People</a></li>  
            <li><a href="archive.html">Archive</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="about.html">About</a></li>
            <!--<li><a href="pictures.html">Photos</a></li>-->
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
  <body>
      <div id="content"><div class="section">
    <h1>Calendar</h1>

    <div id='calendar'></div>
</div>  </div> <!--Content-->
    <div class="footer">
    &#9400; 2017 Western Pennsylvania ARML Team
  </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="src/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->
  </body>
</html>

This is how it looks - How the Calendar looks enter image description here

Upvotes: 1

Views: 2044

Answers (2)

ADyson
ADyson

Reputation: 61984

A few things which are issues with your code (starting from the original edit up to the current version):

1) You need to make sure your CSS and JS files are all based on the same version of fullCalendar, and also that your jQuery and momentJS files are compatible versions, and loaded in the correct order (see https://fullcalendar.io/support/ and https://fullcalendar.io/docs/usage/ respectively).

2) Don't use fullCalendar.io as a CDN. Either use the recommended CDNJS site (as per https://fullcalendar.io/download/) or download and host the files yourself.

3) <script>window.jQuery || document.write('<script src="src/jquery.js"><\/script>')</script> seems to be redundant, since you already included jQuery just above.

4) gcal.js needs to be loaded after fullCalendar.js, because it depends on it in order to work properly.

5) I realised your <link> tags are specified incorrectly. You need to put the URL in a "href" attribute, not a "src" (that's used for script tags). See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link fpr the spec.

6) You're loading the "print" CSS and the regular CSS both into the code, but the "print" style will override the regular style (because it's loaded later). You need to put a media query in the "print" one to ensure it only gets used when the user tries to print the page. e.g. 

<link href="src/fullcalendar.print.css" rel="stylesheet" media="print">

Additional side comments:

1) You don't need jQuery-UI for this to work, and nothing else on your page seems to make use of it, so you can remove it.

2) You have HTML which is outside both the <head> and <body> tags. This is not valid. Anything you want to display should be inside <body>. Many browsers might be tolerant of this problem but it's messy and technically invalid HTML, so you can't expect it to always work properly.

Upvotes: 2

Alessio Libardi
Alessio Libardi

Reputation: 41

You're placing your css in the wrong place.

<link href="components/style.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css"  rel="stylesheet">

Placing the code like this will cause external css resources to override your custom css.

Instead place it like this:

<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css"  rel="stylesheet">
<link href="components/style.css" rel="stylesheet">

Upvotes: -1

Related Questions