如何改变Mat-Calandar的显示值？

Posted 2021-03-19

我在我的项目中准备了一个考勤日历。我可以显示一个垫子日历和头灯日期与他的出勤状态。

现在，我想显示 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?

a 爆料 是为了快速参考而创建的。

我使用的是 Angular9 和 Angular Material

答案

我找到的唯一的方法是使用以下方法添加时间 之后 伪元素。我使用了 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