我正在尝试建立年度日历。现在我可以有12个月的父母和所有的孩子,这可以解决问题,但是我宁愿减少html。我有一个名为AnnualCalendarArr的变量,它是2个月的数组,其中包含正确的天数以及空格(在stackblitz中进行控制台记录)。
HTML
<div id="yearly-calendar">
<div class="month-holder" *ngFor="let days of yearlyCalendarArr; let i = index">
<div class="month">
<div class="month-header">
<h5 class="month-name">{{months[i]}}</h5>
</div>
<div class="month-body">
<div class="week-divider">
<div class="weekday" *ngFor="let w of weekdays">{{w[0]}}</div>
</div>
<div class="week-divider">
<div class="calendar-box"></div>
</div>
</div>
</div>
</div>
</div>
循环遍历days
数组之类的东西>>
<div class="month-divider"> <div class="item" *ngFor="let d of days;let di=index"> <div>{{d}}</div> </div> </div>
css
.month-divider { display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { display: contents; } .item>div{ width: 1.2em; flex:1; background: gold; text-align: left; } .item:nth-child(7n)::after { content: ''; width: 100%; }
您可能需要在大屏幕上进行一些CSS修复