Question

我使用angular-ui / ui-calendar将fullcalendar.js添加到角度应用中。
（angularjs 1.3.10，fullcalendar 2.2.6，ui-calendar 0.9.0-beta.1，jQuery 2.1.3，moment 2.9.0＆amp; angular-moment 0.9.0）

在日历中，我使用dayClick作为日期选择器类型函数来执行：
- 将所选日期写入范围（用于应用程序中的其他用途）
- 使用所选日期
更新事件源对象events数组 - 在日历上显示所选日期（即新更新的event）

完成前两个任务没有问题，但第三个任务没有自动更新。

来自documentation：
An Event Sources objects needs to be created to pass into ng-model. This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.

然而，它似乎并没有自动更新日历...

这是ui-calendar中的错误还是我错过了什么？

有趣的是，如果我在ng-if标签中有日历，并在标签之间切换，则日历会正确更新（切换后）。

请参阅此jsfiddle和：
- 运行，然后选择一个日期（注意events数组已正确更新）
- 切换选项卡2然后返回选项卡1 - 注意日期现在正确显示...

html看起来像：

<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>

控制器代码看起来像

myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){

    $scope.calendarDate = [
        {
            events: [
                {
                    title: 'From',
                    start: '2015-01-31',
                    allDay: true,
                    rendering: 'background',
                    backgroundColor: '#f26522',
                },
            ],
        }
    ];

    $scope.setCalDate = function(date, jsEvent, view) {
            var dateFrom = moment(date).format('YYYY-MM-DD');                   // set dateFrom based on user click on calendar
            $scope.calendarDate[0].events[0].start = dateFrom;              // update Calendar event dateFrom
            $scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');;         // update $scope.dateFrom
    };

    $scope.uiConfig = {
        calendarFrom : {
            editable : false,
        aspectRatio: 2,
            header : {
                left : 'title',
                center : '',
                right : 'today prev,next'
            },
            dayClick : $scope.setCalDate,
            background: '#f26522',
        },
    };
});

PS查看this问题（相似），但在很多版本之前被问过 - 加上建议的解决方案calendar.fullCalendar('refetchEvents');自calendar以来无效对象未定义 - 不确定calendar.fullCalendar对我的代码是什么......

Answer 1

这似乎是ui-calendar的一个问题。到目前为止，我还没有能够解决它。但是，作为一种变通方法，您可以创建一个新事件，而不是更新当前事件：只需将$scope.calendarDate[0].events[0].start = dateFrom;替换为$scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});：http://jsfiddle.net/gidoca/kwsrnopz/。

另一方面，要访问日历对象以调用fullCalendar函数，您将使用$ scope.myCalendar1 - ui-calendar将范围与作为HTML中的日历属性给出的名称变量一起添加。

Answer 2

我遇到了同样的问题，但是以两种不同的方式解决了这个问题。

通过$ http动态加载内容时使用uiCalendarConfig addEventSource

uiCalendarConfig.calendars['mycalendar'].fullCalendar('addEventSource', $scope.events);

如果日历切换可见性并在加载时隐藏，请使用refetchEvents

$timeout(function(){
   uiCalendarConfig.calendars['mycalendar'].fullCalendar('refetchEvents');  
})

$ timeout保存要在范围内编译的日历

angular-ui ui-calendar不更新事件源对象/ ng模型的更改

2 个答案: