angular-ui ui-日历未根据对事件源对象/ng-模型的更改进行更新

Question

我正在使用 angular-ui / ui-calendar 将 fullcalendar.js 添加到 angular 应用。
(angularjs 1.3.10, fullcalendar 2.2.6, ui-calendar 0.9.0-beta.1, jQuery 2.1.3, moment 2.9.0 & angular-moment 0.9.0)

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

上显示selected 日期（即最近更新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 和：
- 运行，然后是 select 日期（注意 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-日历的问题。到目前为止我还没有能够解决它。但是，作为解决方法，您可以创建一个新事件而不是更新当前事件：只需将 $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-日历未根据对事件源对象/ng-模型的更改进行更新

angular-ui ui-calendar not updating on changes to Event Source Object / ng-model

javascript

fullcalendar

angularjs

angular-ui