FullCalendar TypeError: $(...).fullCalendar is not a function

Question

I was trying to put FullCalendar 2.1.1 but it is not working:

<link href='/css/fullcalendar.css' rel='stylesheet' />
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='/js/moment.min.js'></script>
<script src='/js/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src="/js/jquery-ui.custom.min.js"></script>
<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      defaultDate: '2014-09-12',
      editable: true,
      eventLimit: true, // allow "more" link when too many events               
    });

  });
</script>

When I go to try open it I get the following errors:

SyntaxError: missing ) after argument list ..."'").replace(/"/g,""").replace(/\n/g,"")}function P(t){returnt.replace(/


TypeError: $(...).fullCalendar is not a function    
eventLimit: true, // allow "more" link when too many events

I have followed the Basic Usage Documentation but it still doesn't work.

Answer 1

I think you have problem with js try the below urls it may solve your problems,

<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            defaultDate: '2014-09-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });
    });
</script>

If the above code works then download the js files used in script tag

Answer 2

I also had same problem and it was because the HTML jQuery file was loading twice, hence it was giving me error.

Answer 3

I've solved the problem simply changing order of my scripts. You must be set: moment.min.js after jquery.min.js look this:

<script src='/js/jquery.min.js'></script>
<script src='/js/moment.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>

Answer 4

For anyone coming across this, there was only one solution working for me. I'm using webpack to compile my scripts and nothing was working for me, no matter what order I had require('fullcalendar') placed in my main.js file.

I had to downgrade to version 3.4.0. It instantly solved the problem.

npm install --save [email protected]

Answer 5

If using ES6 syntax, just add this at the start of your file:

import "fullcalendar";