时间戳

首页 > 解决方案 > 如何更改 Mat-Calandar 中的显示值

angular - 如何更改 Mat-Calandar 中的显示值

问题描述

我正在为我的项目准备一份出勤日历。我可以用他/她的出勤状态显示垫子日历和大灯日期。

timeIn现在，我想timeOut在mat-calendar.

我的服务器数据看起来像

attendance = [
    { attDate: '2020-04-01', timeIn: '09:00', timeOut: '21:00', status: null },
    { attDate: '2020-04-21', timeIn: '09:00', timeOut: '21:00', status: 'A' },
  ];

要显示的日期

      1

09:00 - 21:00

     21

09:00 - 21:00

如何更改显示值mat-calendar？

创建了一个stackblitz以供快速参考。

我正在使用Angular9和Angular Material

标签： angularangular-material

解决方案

我发现的唯一解决方法是使用::after伪元素添加时间。我使用attr() css 函数来设置时间内容，但您也可以使用 css 变量和var()函数。

// app.component.ts
...

export class AppComponent implements AfterViewInit {
  ...

  constructor(
    private readonly elementRef: ElementRef) {
  }

  ngAfterViewInit() {
    const htmlElement: HTMLElement = this.elementRef.nativeElement;

    for (let [cellClass, date] of [
      ['holi-date', this.attendance[0]],
      ['green-date', this.attendance[1]]
    ] as const) {
      const dateElement = htmlElement.getElementsByClassName(cellClass).item(0);
      dateElement.setAttribute('data-date-time', `${date.timeIn} - ${date.timeOut}`);
    }
  }

// styles.scss
...

[data-date-time]::after {
  content: attr(data-date-time);
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 1em;
}

StackBlitz

推荐阅读