在mat-calendar中突出显示某些日期

Posted 2021-04-13

我正在使用mat-calendar。我想突出某些日期，但我无法做到。没有适当的文档。

html

<mat-card>
  <mat-calendar name="appointment_date" [selected]="selectedDate (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>

TS

onSelect(event){
  this.selectedDate= event;
}

我需要的：

请任何人帮助我。

答案

您可以使用输入绑定dateClass，如Angular Material文档here中所述。注意：这需要Angular Material版本至少为7.1.0

将模板更改为：

<mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>

在你的组件中添加dateClass函数，该函数将生成一个返回MatCalendarCellCssClasses类型的函数，该函数可以像表示要应用的CSS类（或类名数组）的字符串一样简单：

dateClass() {
  return (date: Date): MatCalendarCellCssClasses => {
    if (date.getDate() === 1) {
      return 'special-date';
    } else {
      return;
    }
  };
}

最后在你的styles.css中添加你想要应用的类：

.special-date {
  background-color: red;
}

Here是一个stackblitz，每个月的第一个用红色着色。