Dfyjkt

I'm using angular-fullcalendar with my angularjs 1.6 app. The calendar renders great and overall working good. I'm using a custom date selector directive that passes a date to Fullcalendar, but when I try to use the gotoDate method in my directive's JS I keep getting the error $(...).fullCalendar() is not a function.

I have jQuery (v3.2.1), moment.js, angular-fullcalendar.min.js, and fullcalendar.min.js (v3.9) all loaded.

What am I missing that's preventing me from using .fullcalendar() methods?

index.html

<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/moment.js?"></script>
<link href="/Scripts/fullcalendar.min.css?" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/angular-fullcalendar.min.js?"></script>
<script type="text/javascript" src="/Scripts/fullcalendar.min.js?"></script>

app.js

let appModule = angular.module('Events',
 [
 EventsServices,
 EventSheet,
 'angular-fullcalendar'
 ]);

eventsheet.html

<div fc fc-options="calendarOptions" ng-if="selectedDate" ng-model="eventsArr" class="fullcalendar"></div>

eventsheet index.js

<script>
$scope.$watch('selectedDate', (date, oldDate) => );
</script>

Turns out angular-fullcalendar does not bind the calendar object to the controller. Using code from ui-fullcalendar (which I couldn't get working with my event array), I updated the angular-fullcalendar.js to the following (see lines with comments).

angular.module('angular-fullcalendar', )
.constant('CALENDAR_DEFAULTS', // *** New ***
 calendars: 
)
.value('CALENDAR_DEFAULTS', 
 locale: 'en'
)
.directive('fc', ['CALENDAR_DEFAULTS', fcDirectiveFn]);
function fcDirectiveFn(CALENDAR_DEFAULTS) 
return 
 restrict: 'A',
 scope: 
 eventSource: '=ngModel',
 options: '=fcOptions'
 ,
 link: function (scope, elm, attrs) // *** added attrs ***
 var calendar;
 init();
 scope.$watch('eventSource', watchDirective, true);
 scope.$watch('options', watchDirective, true);
 scope.$on('$destroy', function () 
 destroy();
 );

 function init() 
 if (!calendar) 
 calendar = $(elm).html('');
 
 calendar.fullCalendar(getOptions(scope.options));

 if (attrs.calendar) // *** New ***
 CALENDAR_DEFAULTS.calendars[attrs.calendar] = calendar;
 
 

 function destroy() 
 if (calendar && calendar.fullCalendar) 
 calendar.fullCalendar('destroy');
 

 if (attrs.calendar) // *** New ***
 calendar = CALENDAR_DEFAULTS.calendars[attrs.calendar] = angular.element(elm).html('');
 else 
 calendar = angular.element(elm).html('');
 
 
function getOptions(options) 
 const event_source = scope.eventSource;
 let isMultiSource = false;
 Object.keys(event_source[0]).forEach(key => 
 if (key === "events") 
 isMultiSource = true;
 
 )

 if (isMultiSource) 
 return angular.extend(CALENDAR_DEFAULTS, 
 eventSources: event_source
 , options);
 else 
 return angular.extend(CALENDAR_DEFAULTS, 
 events: event_source
 , options);
 

 

 function watchDirective(newOptions, oldOptions) 
 if (newOptions !== oldOptions) 
 destroy();
 init();
 else if ((newOptions && angular.isUndefined(calendar))) 
 init();
 
 
 
;

Using the above JS, include CALENDAR_DEFAULTS in your controller dependencies. Update your fullcalendar div to include a calendar value:

<div fc fc-options="calendarOptions" ng-model="eventsArray" calendar="myCalendar"></div>

Now you can target your calendar and use fullcalendar methods!

CALENDAR_DEFAULTS.calendars.myCalendar.fullCalendar('gotoDate', newDate);