Angular-Fullcalendar Невозможно использовать методы Fullcalendar

Question

Я использую angular-fullcalendar с моим приложением angularjs 1.6. Календарь отлично работает и в целом работает хорошо. Я использую пользовательскую директиву выбора даты, которая передает дату в Fullcalendar, но когда я пытаюсь использовать метод gotoDate в JS моей директивы, я получаю сообщение об ошибке $ (...). FullCalendar () это не функция.

У меня загружены jQuery (v3.2.1), moment.js, angular-fullcalendar.min.js и fullcalendar.min.js (v3.9).

Чего мне не хватает, что мешает мне использовать методы .fullcalendar ()?

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>

таблица событий index.js

<script>
$scope.$watch('selectedDate', (date, oldDate) => {
    if (!date || angular.equals(date, oldDate))
    return;

    if (date != 0 && date != oldDate) {
        if ($ && $.length) {
            $('.fullcalendar').fullCalendar('gotoDate', date);
        }
    }
});
</script>

Answer 1

Оказывается, angular-fullcalendar не привязывает объект календаря к контроллеру. Используя код из ui-fullcalendar (который я не смог получить с моим массивом событий), я обновил angular-fullcalendar.js следующим образом (см. Строки с комментариями).

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();
            }
        }
    }
};
}

Используя вышеупомянутый JS, включите CALENDAR_DEFAULTS в зависимости вашего контроллера. Обновите ваш полный календарь div, включив в него значение календаря:

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

Теперь вы можете настроить таргетинг на свой календарь и использовать методы fullcalendar!

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