Question

我正在为Fullcalendar实现ui-calendar指令。它应该显示日历，然后可以选择日期。但是，虽然日历的选项卡显示得很好，但在单击其中一个选项卡之前，日历本身仍会保持不变。

此时，可以选择正确传递回父母的日期。但是，重新打开日历后，它再次被取消渲染，一旦渲染，选择就不会突出显示。

此时，这是包含日历配置的Angular指令的代码：

    angular.module('app.directives')
    .directive('calendar', ['_', function(_) {
        return {
            restrict: 'A',
            scope:
            {
                date: '=',      // Date in any format Moment accepts
                select: '&'
            },
            templateUrl: 'partials/directives/calendar.html',
            controller: ['$scope', '$translate', 'uiCalendarConfig', function($scope, $translate, uiCalendarConfig)
            {
                var dayKeys = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'];
                var dayNamesShort = [];
                var dayNamesLong = [];
                _.each(dayKeys, function (dayKey){
                    dayNamesShort.push($translate.instant(dayKey + '.short'));
                    dayNamesLong.push($translate.instant(dayKey + '.long'));
                });

                var monthKeys = ['jan', 'feb', 'mar', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
                var monthNamesShort = [];
                var monthNamesLong = [];
                _.each(monthKeys, function (monthKey){
                    monthNamesShort.push($translate.instant(monthKey + '.short'));
                    monthNamesLong.push($translate.instant(monthKey + '.long'));
                });


                $scope.events = [];
                $scope.calendarConfig = {
                        header: {
                            left: 'prev title next',
                            center: '',
                            right: 'today'
                        },
                        defaultDate: $scope.date,
                        selectable: true,
                        editable: true,
                        firstDay: 1,
                        monthNames: monthNamesLong,
                        monthNamesShort: monthNamesShort,
                        dayNames: dayNamesLong,
                        dayNamesShort: dayNamesShort,
                        dayClick: function (date)
                        {
                            $scope.select({date: date});
                        }
                };
            }]
        };
    }]);

以下是包含该指令的HTML： - 日历本身：

    <div ui-calendar="calendarConfig" ng-model="events"></div>

包含日历的div：

    <div ng-click="openSidePanel()">
<ng-transclude></ng-transclude>
<div side-panel opened="sidePanelOpen">
    <div header-panel back="back()" done="done()" title-key="{{titleKey}}">
        <div calendar date="initialDate" select="select(date)"></div>
    </div>
</div>

这里还有另一个问题，询问访问Fullcalendar对象，即这一个：Accessing fullcalendar object in Angular ui-calendar

我试过这样做是为了打电话给Fullcalendar＆＃39;渲染＆＃39;方法，但到目前为止，来自文档和上述问题的解决方案仅返回undefined。

任何人都可以看到这段代码有什么问题，也许可以解释为什么日历最初没有出现？

有关更多信息，当我尝试使用ui-calendar的文档中建议的方法时，我将指令名称改为＆＃39; calendar＆＃39;到＆＃39; datePicker＆＃39;避免命名冲突。我也在相关的HTML中反映了这一变化。这样做不会改变日历的行为，并且对uiCalendarConfig或$ scope.calendar（我的日历属性的名称）的任何调用都会导致它们未定义。

编辑：This用户报告类似的问题，可以通过引入超时来解决。但是，为了做到这一点，访问uiCalendarConfig是必要的，到目前为止，这个对象在我当前的设置中仍未定义。如果有人能给我指示如何解决这个问题，我将非常感激。谢谢！

Answer 1

进一步搜索显示我们端的凉亭设置有问题。它们被设置为1.0.0，这应该是最后一个版本，但是将它设置为最新的版本。下载了calendar.js文件的最新版本，解决了uiCalendarConfig未定义的问题。

解决了这个问题后，我使用了问题中提到的超时解决方案来正确渲染日历。

Fullcalendar日历最初不使用Angular进行渲染

1 个答案: