How to make my calendar with the highest possible height within a directive

Question

I am starting with angular. I decided to create my own simple month calendar within a directive. It's based on this calendar : multipleDatePicker. But the problem is that I can't make it with the highest possible height according to parent.

The calendar is divided in 4 parts. The month name on top, the short day names below, then the calendar days and then the controls to move to next/previous month.

I just want the day part (so the picker-day class) to expand. It could be expanded according to the parent height. The parent height can be greater if the window is resized or if the month is changed by the controls.

Here is the template. The days are inline-block and the width is calculated in css by 100% / 7 days. However I can't apply that for the height because there are 5 or 6 lines of weeks according to the month.

<div class="date-picker">
    <div class="picker-action-row">
        <div class="picker-month">{{monthName}}</div>
    </div>
    <div class="picker-days-week-row">
        <div ng-repeat="day in daysOfWeek">{{day}}</div>
    </div>
    <div class="picker-days-row">
        <div class="picker-day picker-empty" ng-repeat="x in emptyFirstDays">&nbsp;</div><!-- 
     --><div class="picker-day" ng-repeat="day in days">{{day ? getDay(day) : ''}}</div><!-- 
     --><div class="picker-day picker-empty" ng-repeat="x in emptyLastDays">&nbsp;</div>
    </div>
    <div class="picker-action-row">
        <div class="picker-navigate" ng-click="previousMonth()"><i class="fa fa-chevron-left"></i></div><!-- 
     --><div class="picker-navigate" ng-click="currentMonth()"><i class="fa fa-home"></i></div><!-- 
     --><div class="picker-navigate" ng-click="nextMonth()"><i class="fa fa-chevron-right"></i></div>
    </div>
</div>

In the directive I have the functions to change months like this

scope.nextMonth = function() { ... }
scope.previousMonth = function() { ... }
scope.currentMonth = function() { ... }

And I have the function that calculate the perfect size according to parent's height like this (it's using the dom properties to get the offsetHeight values)

scope.getPerfectDayHeight = function () { ... }

And I try to change the picker-day height with jquery when the month change or when the window is resized but the view is not updating.

$('.picker-day').css('height', scope.getPerfectDayHeight() );

Maybe it's not working because it's not the way to do that with Angular. So if you have any idea to do that properly. Maybe I don't even need JQuery to do that ?

Thanks

Answer 1

Finally, I use a percentage calculation like

.picker-days-row .picker-day {
    height: 1 / 5 * 100%;
}

.picker-days-row .picker-day.6rows {
    height: 1 / 6 * 100%;
}

And I have a ng-class that is set after calculating the number of rows in the calendar.

...
<div class="picker-day" ng-class="{'6rows': dayLines == 6}" ng-repeat="day in days">{{day ? getDay(day) : ''}}</div>
...