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

Question

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

编辑：我使用这个组件。

我想更改默认周视图，感谢 [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>

但结果是 这样的

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

Answer 1

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

这是您的示例的解决方案：

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