Changes in eventSources model do not reflect in fullCalendar

问题

Im using angularjs, restangular & angular-ui/ui-calendar. I want to load events from rest API when view is changed (next/prev month, etc.) I'm trying to do that from viewRender callback. Inside callback, data is retrieved from API and applied to eventSources model. However changes in model do not get applied in calendar.

Someone please point out what is wrong or if I'm missing anything.

I've tried fullCalendar('render'), rerenderEvents, refetchEvents etc. The calendar keeps showing initial events set in controller.

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

}]);

回答1:

Don't fetch events in viewRender.

Instead use eventSources as the event source. Two ways: give it a callback or give it a JSON feed.

Callback method

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 method

events: '/myfeed.php'

Where that script takes a date range returns a JSON array of events. For a more advanced version with data options see the docs (scroll down to jQuery $.ajax options).

And if the data needs modified before being added, use eventDataTransform

回答2:

Just in case anyone is stuck here.

approach shared by @slicedtoad is the right one however in angularjs, using callback of events function gives error in calendar.js.

Here's what I'm doing now.

<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];

来源：https://stackoverflow.com/questions/28232659/changes-in-eventsources-model-do-not-reflect-in-fullcalendar

标签

angularjs

fullcalendar

restangular