Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript fullCalendar plugin reading 'applyAll' as undefined in gcal.js

I am attempting to use the google calendar module of the fullcalendar plugin in JavaScript. When I attempt to load the google calendar, the console is displaying:

Uncaught TypeError: Cannot read property 'applyAll' of undefined

The error is occurring on line 23 of gcal.js:

21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;

The console.log() that I have added returns $.fullCalendar as undefined, and then fc.applyAll is also returning undefined. My knowledge of JS is not good enough to fully understand what is going on in this file, and I am not sure what is going wrong.

Here is my html:

<head>
  <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
  <script src='fullcalendar/lib/jquery.min.js'></script>
  <script src='fullcalendar/gcal.js'></script>
  <script src='fullcalendar/lib/moment.min.js'></script>
  <script src='fullcalendar/fullcalendar.js'></script>
  <link href='style.css' rel='stylesheet' />
</head>
<body>
  <div id='calendar'></div>
</body>

My JavaScript:

    $(document).ready(function() {
      $('#calendar').fullCalendar({
        googleCalendarApiKey: 'my-api-key',
        events: {
          googleCalendarId: 'my-calendar-id'
        }
      });
    });

And I have downloaded the most recent version of gcal.js (there seemed to be a problem with the file, and the site provided a link to the most up to date version).

like image 704
Ed Prince Avatar asked Jul 06 '15 10:07

Ed Prince


1 Answers

The problem is with the order you've imported the library files.

fullcalendar is a jQuery plugin, which usually means it will end up as a property on the jQuery object e.g. $.fullCalendar.

Now, the gcal file depends on that property being there, so that it can access the .applyAll method on it, however, you're loading gcal.js before you load fullcalendar.js.

If you change the ordering like this, it works without problems.

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

As a rule of thumb, try and put the files that you know have no dependencies (they don't rely on another library) first.

like image 148
Dan Prince Avatar answered Sep 26 '22 00:09

Dan Prince