Question

我从角度开始。我决定在指令中创建自己的简单月历。它基于此日历：multipleDatePicker。但问题是，根据父母的说法，我不能以最高的高度制作它。

日历分为4个部分。月份名称在顶部，短日期名称在下面，然后是日历日期，然后控件移动到下一个/上个月。

我只想要将日期部分（所以选择日级别）扩展。它可以根据父高度进行扩展。如果调整窗口大小或者控件更改月份，则父级高度可以更大。

这是模板。天数是内联块，宽度以css计算100％/ 7天。但是我无法将其应用于高度，因为根据月份有5或6行周。

<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>

在指令中，我有像这样改变月份的功能

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

我有这样的功能，根据父亲的身高计算完美尺寸（使用dom属性获取offsetHeight值）

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

当月份更改或调整窗口大小但视图未更新时，我尝试使用jquery更改选择器日高度。

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

也许它不起作用，因为使用Angular并不是这样做的。所以，如果你有任何想法，那么正确。也许我甚至不需要JQuery来做到这一点？

由于

Answer 1

最后，我使用百分比计算，如

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

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

我有一个ng-class，它是在计算日历中的行数后设置的。

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

如何在指令中以尽可能高的高度制作我的日历

1 个答案: