angularjsfullcalendarui-calendar

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

I am trying to get a list of dates from Rest and change the background color of those dates using dayRender .But when i try to do it the color is not getting changed for the first time.If i go to next month and come back to the month,it will work perfectly.Here are screenshots to make it more clear. When i load the page enter image description here

When i move from june to julyenter image description here

When move back to june enter image description here

Here is my code .rest/leave/holidayList is the rest url for retreiving dates from db.

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


                    });
                });
                
            });
            
            

        }
    }

}]);

Solution

  • Remember that the REST call is asynchronous. Just put all the code that set colours inside a promise, so when the REST service rest/leave/holidayList responses, then you paint the colours. You can use nested promises if needed.

    Here's some code:

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

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

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

    To compare the use of "success" and "then" have a look at: https://stackoverflow.com/a/16385350/8058079