Question

我使用angularjs，restangular＆amp;角UI / UI的日历。我希望在更改视图时从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

不要在viewRender中获取事件。

而是使用eventSources作为事件来源。两种方式：give it a callback或give it a JSON feed。

回调方法

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')
        }]);
    }
}

JSON Feed方法

events: '/myfeed.php'

该脚本采用日期范围返回JSON事件数组。有关包含数据选项的更高级版本，请参阅docs (scroll down to jQuery $.ajax options)。

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

Answer 2

万一有人被困在这里。

@slicedtoad共享的

方法是正确的，但是在angularjs中，使用事件回调函数在calendar.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];

eventSources模型中的更改不会反映在fullCalendar中

2 个答案: