在 Angular 日历 6+ 上为周视图自定义单元格模板答案

【问题标题】：Customizing cell template for week view on Angular Calendar 6+在 Angular 日历 6+ 上为周视图自定义单元格模板
【发布时间】：2020-07-23 08:47:01
【问题描述】：

如何自定义周视图的单元格模板？我们有必要在单击的段时间上显示一个弹出框（对此有更多检查），我想更改 [hourSegmentTemplate] 的模板。你能发一个例子吗？谢谢

编辑：我使用this 组件。

我想更改默认周视图，谢谢 [hourSegmentTemplate] 属性：

<mwl-calendar-week-view
 *ngSwitchCase="CalendarView.Week"
 [viewDate]="viewDate"
 [hourSegmentTemplate]="weekView"
 [events]="events"
 [refresh]="refresh">
</mwl-calendar-week-view>

<ng-template #weekView let-segment="segment" let-locale="locale">
 <div
 class="cal-hour-segment"
 [class.cal-hour-start]="segment.isStart"
 [class.cal-after-hour-start]="!segment.isStart"
 [ngClass]="segment.cssClass">
 <span class="cal-time">
  {{ segment.date | calendarDate:'dayViewHour':locale }}
 </span>
 This is some custom content
</div>

但结果是 this

我只想要左边的小时数，以及管理单个模板单元格的可能性。

【问题讨论】：

您好，您的问题并不完全清楚。您能否提供到目前为止的代码示例？

标签： javascript angular angular-calendar

【解决方案1】：

如果您使用ng-template，您可以访问上下文变量isTimeLabel，它有一个布尔值，用于描述时间标签的位置。

这是您示例的解决方案：

<ng-template #weekView let-segment="segment" let-locale="locale" let-isTimeLabel="isTimeLabel">
 <div *ngIf="isTimeLabel">
 </div>
</ng-template>

【讨论】：