Angular custom class bootprap datepicker

Question

I am using Angular with the UI Bootstrap Datepicker ( https://angular-ui.imtqy.com/bootstrap/ ) and I am trying to update the class of the day to show something is happening on that particular day using the existing customClass. This works great when past dates are synchronized, but not asynchronous using the $ resource.

HTML

<uib-datepicker custom-class="getDayClass(date, mode)" ng-model="dt" min-date="minDate" show-weeks="false" starting-day="1" class="well well-sm" ng-change="selectDateChange()"></uib-datepicker> 

Js

 $scope.getDayClass = function (date, mode) { if ($scope.myCalendarEvents.length > 0) { if (mode === 'day') { var dayToCheck = new Date(date).setHours(0, 0, 0, 0); for (var i = 0; i < $scope.myCalendarEvents.length; i++) { var currentDay = new Date($scope.myCalendarEvents[i].startDate).setHours(0, 0, 0, 0); if (dayToCheck === currentDay) { return "full"; } } } return ''; } }; 

See an example where an asynchronous call is made (ps. This is not my Plnkr):

http://plnkr.co/edit/h8PxWfxSEtZuVCct00mD?p=preview

Answer 1

I had the same problem to fix this. I put in the element ng-if = "variable", which contains the uib-datepicker.

the "variable" should be myCalendarEvents, and when uib-datepicker is displayed, the data is available