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

我正在使用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& angular-moment 0.9.0)

在日历中,我使用dayClick作为datepicker类型函数：
– 将所选日期写入范围(用于应用程序中的其他用途)
– 使用所选日期更新Event Source Object事件数组
– 在日历上显示所选日期(即新更新的事件)

我完成前两个任务没有问题,但第三个没有自动更新.

从documentation：
需要创建Event Sources对象以传递到ng-model.
将监视此对象的值以进行更改.如果发生更改,则该特定日历将调用相应的fullCalendar方法.

但它似乎没有自动更新日历…

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

有趣的是,如果我在ng-if选项卡中有日历,并在选项卡之间切换,日历会正确更新(在切换之后).

见jsfiddle和：
– 运行,然后选择一个日期(注意事件数组已正确更新)
– 切换标签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.fullCalendar.

解决方法:

这似乎是ui-calendar的一个问题.到目前为止我还没能解决它.但是,作为一种解决方法,您可以创建一个新事件,而不是更新当前事件：只需替换$scope.calendarDate [0] .events [0] .start = dateFrom; by $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中作为日历属性给出的名称变量.

标签：javascript,angularjs,angular-ui,fullcalendar
来源： https://codeday.me/bug/20190628/1318782.html