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

我想从休息中获取日期列表，并使用dayRender更改这些日期的背景颜色。但是当我尝试这样做时，颜色没有变化这是第一次。如果我下个月回到本月，它会完美的工作。这里有截图使它更清晰。当我加载的页面 ui日历单元格背景颜色第一次没有显示

，当我从六月移至七月

当回迁月

这里是我的代码.rest /离开/ holidayList是其余网址从db中删除日期。

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

 
    return { 
 
     displayCalendar: function($scope) { 
 
     
 
      $http.get("rest/leave/holidayList", {}).success(function(data, status, headers, config) { 
 
    \t   $scope.holidayList = data; 
 
    \t   console.log($scope.holidayList); 
 
    \t   
 
    \t \t \t }).error(function(data, status, headers, config) { 
 
    \t   alert("error"); 
 
    \t \t \t }); 
 
     \t 
 
      $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) { 
 
        \t 
 
         
 
         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){ 
 
         
 
      \t   \t if(((moment(value.holiday_date).format("YYYY-MM-DD"))==moment(date).format("YYYY-MM-DD"))) 
 
      \t   \t \t { 
 
      \t   \t \t cell.css("background-color", "red"); 
 
      \t   \t \t } 
 
      \t   }); 
 
      \t    
 
       
 
         
 
        }, 
 
        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 
 

 

 
        }); 
 
       }); 
 
       
 
      }); 
 
      
 
      
 

 
     } 
 
    } 
 

 
}]);

来源

2017-06-01 Vikhyath Maiya

记住REST调用是异步的。只需将所有设置颜色的代码放入承诺中，当REST服务响应时，就可以绘制颜色。如果需要，您可以使用嵌套的promise。

下面是一些代码：

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

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

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

要比较使用“成功”和“然后”看看： https://stackoverflow.com/a/16385350/8058079

来源

2017-06-01 13:32:59

感谢队友...... –

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

回答

相关问题