我更改日期时动态加载数据

时间:2017-01-02 14:03:56

标签: angularjs fullcalendar

这是我的日历对象

$scope.uiConfig = {
            calendar: {
                height: 450,
                editable: false,
                header: {
                    left: 'title',
                    center: '',
                    right: 'today prev,next'
                },
                eventClick: $scope.onEventClick,
                eventDrop: $scope.alertOnDrop,
                eventResize: $scope.alertOnResize,
                eventRender: $scope.eventRender,
                dayClick: $scope.onDayClick,
                viewRender: $scope.getData
            }
        };

     $scope.getData = function(view, element){
            $scope.intervalStartDate = new Date(view.start);
            $scope.intervalEndDate = new Date(view.end);

        $scope.managedEvents = Event.getFittingsForDateInterval({
            intervalStartDate : convertDate($scope.intervalStartDate),
            intervalEndDate : convertDate($scope.intervalEndDate)
        });

$scope.managedEvents.$promise.then(function(data){
    $scope.uiConfig.calendar.events = data;
});

    }

如果我删除

$scope.uiConfig.calendar.events = data;

没有数据正在填充,如果我包含它正在刷新并加载当前月份数据

第一次加载1月份的数据时,每当我点击下个月图标时,它都会调用2月份的数据,而日历又会重置为当月(它再次调用$ scope.getData)< / p>

data = [{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name}];

我想只获取当前视图的数据,而不是一次获取所有数据。 任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

Controller.js代码:。

$scope.getEvents = function(){
            var obj = {};
            $scope.events = [];
            obj.startDate = new Date($scope.myView.intervalStart).getTime();
            obj.endDate = new Date($scope.myView.intervalEnd).getTime();

        if($scope.myView.name == "month"){
            obj.endDate = obj.endDate - 19801000;
        }
       //Give a call to database from here, in which obj contains
       // start and end of the view

        var getEventsPromise = masterCalendarAPI.getEvents(obj);
        getEventsPromise.then(function (response) {
            if(response.statusCode == 200){
               //Assign $scope.event the list object retrieved from database
           }
        },
        function (error) {
           console.log(error);
        });
    }

//Remember this method will be called on each view change with all details in 'view' object
     $scope.renderView = function (view) {
            $scope.myView = view;
            $scope.getEvents();
        } 

    $scope.uiConfig = {
                calendar: {
                    height: 500,
                    editable: false,
                    header: {
                        left: 'prev,next title',
                        center: '',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    eventLimit: true,
                    views: {
                        month: {
                            eventLimit:3
                        }
                        },
                    columnFormat:'dddd',
                    timezone: 'local',
                    timeFormat: 'hh:mm a',
                    titleFormat:'MMMM D, YYYY',
                    slotDuration:'00:30:00',
                    eventRender:$scope.eventRender,
                    eventClick: $scope.eventClicked,
                    dayClick: $scope.dayClick,
                    eventDrop: $scope.alertOnDrop,
                    eventResize: $scope.alertOnResize,
                    viewRender: $scope.renderView
                }
            } ;
//event sources array
    $scope.eventSources = [$scope.events];