Question

我在我的angularjs 1.6应用程序中使用了angular-fullcalendar。日历呈现出良好的整体效果。我使用的是自定义日期选择器指令，该指令将日期传递给Fullcalendar，但是当我尝试在指令的JS中使用gotoDate方法时，我不断收到错误$（...）。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>

现在，您可以定位日历并使用全日历方法！

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

Angular-Fullcalendar无法使用Fullcalendar方法

1 个答案: