angular - 突出显示日历中的某些日期

我正在使用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;
}

我需要的:

最佳答案

将模板更改为此:

<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;
}

关于angular - 突出显示日历中的某些日期，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54438752/