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

Question

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

我需要什么:

Answer 1

You can use the the input binding dateClass as describe in the Angular Material documentation here. Note: This requires an Angular Material version of at least 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 is a stackblitz that colors the first of each month in red.