Как можно изменить отображаемое значение в Mat-Calandar

Question

Я готовлю календарь посещаемости в моем проекте. Я мог бы отображать мат-календарь и даты фар с его / ее статусом посещаемости.

Теперь я хотел бы отобразить 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 stackblitz создан для быстрого ознакомления.

Я использую Angular9 и Angular Material

Answer 1

Единственный найденный мной обходной путь - добавить время, используя :: 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