Angular Bootstrap datepicker custom class

Question

I'm using Angular with UI Bootstrap Datepicker (https://angular-ui.github.io/bootstrap/) and I'm trying to update the day class to show there is something happening on that specific day using the existing customClass. This works fine when the dates passed are sync but not async using a $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 example where the async 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 it I put an ng-if="variable" in element which contains the uib-datepicker.

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