"Uncaught SyntaxError: Unexpected token ." with FullCalendar

Question

I am working with the jQuery FullCalendar plugin. I import like this:

<link rel="stylesheet" type="text/css" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css"></link>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css"></script>

When I load the pahe with Chrome, if I open console I can see this error message:

Uncaught SyntaxError: Unexpected token . cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css:8

So the error seems to be in css file of the FullCalendar plugin, in this line:

.fc {
direction: ltr;
text-align: left;
}

Why would that "." before "fc" be wrong? Any idea what's wrong?

Answer 1

It's a .css file, which means it's a Cascading Stylesheet and not a script. You want a <link> tag rather than a <script> one.

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css"/>

Attempting to load it using a <script> tag results in your CSS being interpreted as JavaScript, and throwing the error because it's invalid. You can't use a . at the start of a JavaScript identifier so it's not expecting to find one at that position in the "code".