Ionic Angularjs ui-calendar根据月份获取事件

时间:2015-02-16 12:32:03

标签: android angularjs fullcalendar ionic

您好我是angularjs的新手我尝试使用角度版本的jquery全日历http://angular-ui.github.io/ui-calendar/。我的问题是我能够在加载时获取所有事件。是否可以获取点击下一个事件或上一个事件(基于获取该特定月份事件的月份)?

用于在加载时获取事件的代码

var calCurrentDate = $filter('date')(new Date(), 'yyyy-MM-dd');
$scope.init = function() {
        console.log('this is the new calCurrentDate'+calCurrentDate);

        $ionicLoading.show({template: '<i class="icon ion-loading-c"></i>'});
        var req = {
            method: 'GET', 
            url: link+'meal/calendar?api_token='+$localStorage.accessToken+'&start_date='+calCurrentDate+'&id=',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }
        console.log(req);
        $http(req).success(function(data) { 
            $scope.schedule = data.dayplan;
            for(i in $scope.schedule) {
                $scope.events.push({
                    id: $scope.schedule[i].id,
                    title: '.',
                    start:   $scope.schedule[i].day,
                    color: $scope.schedule[i].color_code
                });
            }
            $ionicLoading.hide(); 
        }).error(function(data) { 
            console.log(data.message); 
            $ionicLoading.hide(); 
        });
    };

点击下一个或上一个我能够得到月份和日期,我尝试这样

$scope.renderView = function(view){    
    var date = new Date(view.calendar.getDate());
    $scope.arrowDate = $filter('date')(date, 'yyyy-MM-dd');
    if($scope.arrowDate != calCurrentDate){
        calCurrentDate = $scope.arrowDate;
        $scope.init(calCurrentDate);
    }
};

也尝试了这样

$scope.renderView = function(view){    
    var date = new Date(view.calendar.getDate());
    $scope.arrowDate = $filter('date')(date, 'yyyy-MM-dd');
    if($scope.arrowDate != calCurrentDate){
        $ionicLoading.show({template: '<i class="icon ion-loading-c"></i>'});
        var req = {
            method: 'GET', 
            url: link+'meal/calendar?api_token='+$localStorage.accessToken+'&start_date='+$scope.arrowDate+'&id=',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }
        console.log($scope.arrowDate);
        $http(req).success(function(data) { 
            $scope.schedule = data.dayplan;
            for(i in $scope.schedule) {
                $scope.events.push({
                    id: $scope.schedule[i].id,
                    title: '.',
                    start:   $scope.schedule[i].day,
                    color: $scope.schedule[i].color_code
                });
            }
            $ionicLoading.hide(); 
        }).error(function(data) { 
            console.log(data.message); 
            $ionicLoading.hide(); 
        });
    }
};

问题是它获取数据但它会回到当前月份 (例如:如果当前月份是2月,如果我点击下一步,我可以获取3月的数据,但它会回到2月,而不是留在3月)任何帮助表示赞赏。提前谢谢。

1 个答案:

答案 0 :(得分:0)

答案问题在于$ scope.event.push这里我是如何解决的

if($scope.arrowDate != calCurrentDate){
            $ionicLoading.show({template: '<i class="icon ion-loading-c"></i>'});
            var req = {
                method: 'GET', 
                url: link+'meal/calendar?api_token='+$localStorage.accessToken+'&start_date='+$scope.arrowDate+'&id=',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }

            $http(req).success(function(data) { 
                console.log(data.message); 
                $scope.schedule = data.dayplan;
                var tmpEvent = [];
                for(i in $scope.schedule) {
                    tmpEvent.push({
                        id: $scope.schedule[i].id,
                        title: '.',
                        start:   $scope.schedule[i].day,
                        color: $scope.schedule[i].color_code
                    });
                }
                uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
                uiCalendarConfig.calendars.myCalendar.fullCalendar( 'addEventSource', tmpEvent); 
                $scope.fetchMeal($scope.arrowDate);
                $ionicLoading.hide(); 
            }).error(function(data) { 
                console.log(data.message); 
                $ionicLoading.hide(); 
            });
        }