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

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

补充 Fabian 的答案，如果您在看到突出显示的颜色时遇到问题并且您正在使用lazy loading组件，请记住::ng-deep在类的前面添加。像这样：

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

干杯!

Answer 2

您可以使用输入结合dateClass的角度材质文档中描述为 这里。注意：这需要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;
}

这 是一个堆叠的闪电战，每个月的第一天以红色显示。