0

我从角度开始。我决定在指令中创建自己的简单月历。它基于这个日历：multipleDatePicker。但问题是，根据父母的说法，我无法做到尽可能高的高度。

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

我只是想让白天部分（所以选择日课程）扩大。它可以根据父高度进行扩展。如果调整窗口大小或控件更改月份，则父高度可以更大。

这是模板。天数是 inline-block ，宽度在 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 来做到这一点？

谢谢

4

1 回答 1

0

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

.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>
...
于 2014-07-31T10:04:45.957 回答