ui-日历单元格背景颜色第一次没有显示

Question

我正在尝试从 Rest 获取日期列表并使用 dayRender 更改这些日期的背景颜色。但是当我尝试这样做时，第一个 time.If 颜色没有改变我去到下个月再回到这个月，它会起作用 perfectly.Here 是屏幕截图以使其更清楚。当我加载页面时

当我从六月搬到七月时

回到六月时

这是我的代码。rest/leave/holidayList 其余的 url 用于从数据库中检索日期。

app.factory('calendarSer', ['$http', '$rootScope', 'uiCalendarConfig', function($http, $rootScope, uiCalendarConfig) {
 

    return {
        displayCalendar: function($scope) {
        
           $http.get("rest/leave/holidayList", {}).success(function(data, status, headers, config) {
             $scope.holidayList = data;
             console.log($scope.holidayList);
             
        }).error(function(data, status, headers, config) {
             alert("error");
        });
         
            $calendar = $('[ui-calendar]');
            var date = new Date(),
                d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
            $scope.changeView = function(view) {
                $calendar.fullCalendar('changeView', view);
            };
            var m = null;
            if ($scope.selectable == "Yes") {
                m = true;
            } else {
                m = false;
            }
            /* config object */
            $scope.uiConfig = {
                calendar: {
                    lang: 'da',

                    height: 400,
                    editable: true,
                    selectable: m,
                    header: {
                        left: 'month basicWeek basicDay',
                        center: 'title',
                        right: 'today prev,next'
                    },
                    eventClick: function(date, jsEvent, view) {
                        $scope.alertMessage = (date.title + ' was clicked ');
                        alert("clicked" + date.title);
                    },
                    select: function(start, end, allDay) {

                        var obj = {};
                        obj.startDate = start.toDate();
                        obj.endDate=moment(end - 1 * 24 * 3600 * 1000).format('YYYY-MM-DD');

                        $rootScope.selectionDate = obj;
                        $("#modal1").openModal();
                        //    calendar.fullCalendar('unselect');
                    },
                    dayRender: function (date, cell) {
                     
                        
                        var today = new Date();
                        today=moment(today).toDate();
                        var end = new Date();
                        end=moment(end).toDate();
                        end.setDate(today.getDate()+7);
                        date=moment(date).toDate();
                        
                        
                        angular.forEach($scope.holidayList,function(value){
                      
                      if(((moment(value.holiday_date).format("YYYY-MM-DD"))==moment(date).format("YYYY-MM-DD")))
                       {
                      cell.css("background-color", "red");
                       }
                   });
                       
             
                      
                    },
                    eventRender: $scope.eventRender,
                    

                   
                }
            };
            
         
            
            $scope.events = [];
            $scope.eventSources = [$scope.events];
            $http.get($scope.url, {
                cache: true,
                params: {}
            }).then(function(data) {

                console.log(data);
                $scope.events.slice(0, $scope.events.length);
                angular.forEach(data.data, function(value) {

                    console.log(value.title);
                    if (value.approvalStatus == "Approved") {
                        var k = '#114727';
                    } else {
                        k = '#b20000'
                    }
                    $scope.events.push({

                        title: value.signum,
                        description: value.signum,
                        start: value.startDate,
                        end: value.endDate,
                        allDay: value.isHalfDay,
                        stick: true,
                        status: value.approvalStatus,
                        backgroundColor: k


                    });
                });
                
            });
            
            

        }
    }

}]);

Answer 1

请记住，REST 调用是异步的。只需将所有设置颜色的代码放在一个承诺中，这样当 REST 服务 rest/leave/holidayList 响应时，您就可以绘制颜色。如果需要，您可以使用嵌套承诺。

这是一些代码：

$http.get('rest/leave/holidayList').then(function(response) {
     // success 
     $scope.holidayList = data;

     /* config object */
     $scope.uiConfig = {
         calendar: {
           /* calendar code */
         }
     }

}, function(response) {
    // error handler
});

要比较 "success" 和 "then" 的用法，请查看：

ui-日历单元格背景颜色第一次没有显示

ui-calendar cell background color not displaying for the first time

angularjs

fullcalendar

ui-calendar