事件源模型中的更改不会反映在完整日历中

Question

Im using angularjs， restangular & angular-ui/ui-calendar.我想在视图更改时从 rest API 加载事件（下个月/上个月等）我正在尝试从viewRender回调中做到这一点。在回调中，从 API 检索数据并将其应用于eventSources模型。但是，模型中的更改不会在日历中应用。

有人请指出出了什么问题，或者我是否遗漏了什么。

我试过fullCalendar('render')、rerenderEvents、refetchEvents等。日历不断显示控制器中设置的初始事件。

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="visitCal"></div>

myControllers.controller('CalenderCtrl',['$scope','uiCalendarConfig','Restangular',function($scope,uiCalendarConfig,Restangular){
    var fetchEvents=function(view,element){
        var cal=uiCalendarConfig.calendars.visitCal;
        var visits=Restangular.all('visits');
        visits.getList({start:view.start.format(),end:view.end.format()}).
            then(function(visits) {
                $scope.eventSources.events=[];
                for(var i= 0;i < visits.length;i++){
                    $scope.eventSources.events.push(visits[i]);
                }
                cal.fullCalendar('render');
            }
        );
    }; // end fetchEvents function
    $scope.uiConfig = {
        calendar:{
            viewRender:fetchEvents,
            height: 450,
            editable: true,
            header:{
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            }
        }
    };
    //initial test events
    $scope.eventSources={events:[
        {title:'ev1',
            start:'2015-01-30',
            className:'testClass'},.......
    ]};
}]);

Answer 1

以防万一有人被困在这里。

@slicedtoad共享的方法是正确的，但是在 AngularJS 中，使用事件回调函数会在日历.js中出错。

这就是我现在正在做的事情。

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="visitCal"></div>
var fetchEvents=function(start, end, timezone, callback){
        var cal=uiCalendarConfig.calendars.visitCal;
        var visits=Restangular.all('visits');
                    visits.getList({start:start.format(),end:end.format()}).then(function(visits) {
            $scope.events.length=0;
            for(var i= 0;i < visits.length;i++){
                var event={
                    start: visits[i].start,
                    title:visits[i].title,
                };
                $scope.events.push(event);
            }
            //callback(new_events_array);->this gives error though it works
        });
    };
$scope.uiConfig = {
        calendar:{
            eventClick:eventInfo,
            events:fetchEvents,
            height: 450,
            editable: true,
            header:{....}
        }
    };
$scope.events=[];
$scope.eventSources=[$scope.events];

Answer 2

不要在 viewRender 中获取事件。

请改用eventSources作为事件源。两种方法：给它一个回调或给它一个 JSON 源。

回调方法

calendar: {
    height: 450,
    editable: true,
    header: {
        left: 'month basicWeek basicDay agendaWeek agendaDay',
        center: 'title',
        right: 'today prev,next'
    },
    events: function (start, end, timezone, callback) { // Fetch your events here
        // This could be an ajax call or you could get the events locally
        callback([{ 
            title: 'test1',
            start: moment()
        }, {
            title: 'test2',
            start: moment().add(2, 'hours')
        }]);
    }
}

数据简明源方法

events: '/myfeed.php'

该脚本采用日期范围的位置将返回事件的 JSON 数组。有关带有数据选项的更高级版本，请参阅文档（向下滚动到 jQuery $.ajax 选项）。

如果在添加之前需要修改数据，请使用eventDataTransform