Angular UI-Calendar TypeError: calendar.fullCalendar is not a function

Question

I been trying to use Angular: ui-calendar with meteor, but get this error.

TypeError: calendar.fullCalendar is not a function
    at Scope.scope.initCalendar (calendar.js:265)
    at Object.fn (calendar.js:337)
    at Scope.$digest (angular.js:15896)
    at Scope.$apply (angular.js:16160)
    at bootstrapApply (angular.js:1679)
    at Object.invoke (angular.js:4523)
    at doBootstrap (angular.js:1677)
    at Object.bootstrap (angular.js:1697)
    at HTMLDocument.onReady (app.js:47)
    at fire (jquery.js:3143)

In meteor packages i habe:

angular 1.2.3 angularui:ui-calendar

also tried to use the package inserted directly not using meteor add. but using the calendar.js file (which is different)

Both get the same error.

Tried this: https://github.com/angular-ui/ui-calendar/issues/267

       scope.initCalendar = function () {
                if (!calendar) {
                    calendar = $(elm);
                }
                calendar.fullCalendar(options);
                if (attrs.calendar) {
                    uiCalendarConfig.calendars[attrs.calendar] = calendar;
                }
         };

But is seems this fix doesnt work with meteor and angular-meteor.

Any ideas on how to fix this issue?

did you load jQuery library before angular.js? – PrinceG Jan 29 '16 at 04:54 — PrinceG, Jan 29 '16 at 04:54
Yes jquery is before angular. – Boney Collins Jan 29 '16 at 17:58 — Boney Collins, Jan 29 '16 at 17:58

score 2 · Answer 1 · edited Dec 04 '17 at 09:20

2

You should check the initCalendar and destroyCalendar methods in angular-ui-calendar/src/calendar.js. If they're creating the element by using:

angular.element(elm).html('');

Then you should replace it by:

$(elm).html('');

edited Dec 04 '17 at 09:20

g00glen00b

41,995
13
95
133

answered Dec 04 '17 at 07:27

user2313833

139
1
2
14

score 1 · Answer 2 · answered Mar 01 '19 at 18:24

the problem is that angular doesn't find jquery in window.$

if you are using es6 modules:

import jquery from "jquery";

export default (window.$ = window.jQuery = jquery);

otherwise you should add js script in you index.html and before your app code:

window.$ = window.jQuery = jquery

score 0 · Answer 3 · answered Aug 28 '16 at 14:42

I think you may not have correctly configured the controller for your page?

I had this same issue but using ui-router, I had the controller specified incorrectly and it wasn't being wired up. Fixing this made the calendar appear and this error go away.

Angular UI-Calendar TypeError: calendar.fullCalendar is not a function

3 Answers3

Linked