Angular 在mat日历中突出显示某些日期

我正在使用

mat日历

。我试图突出某些日期，但我做不到。这方面没有适当的文档

HTML

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

我需要的是：

您可以使用输入绑定

dateClass

，如中所述 角材料文件 . 注意：这需要至少7.1.0版本的角材质

将模板更改为：

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

最后，在

style.css中添加要应用的类：

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


是一个stackblitz，将每个月的第一天涂成红色

补充Fabian的答案，如果您在查看高亮显示的颜色时遇到问题，并且您正在使用
延迟加载
组件，请记住在类前面添加
：：ng deep
。像这样：

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

干杯
 如果数据是通过服务加载的，那么您必须使用
mat日历上的
*ngIf=“datas”
，以便在数据进入后调用
dateClass
。即：

html:

@Fabian Küng在stakblitz上的回答给了我一个错误，指出
date.getDate（）
不是函数

我通过将
date
分配给
newdate（）
解决了这个问题。我的代码如下所示：


return（日期：date）：MatCalendarCellCssClasses=>{
日期=新日期（日期）；//{
返回d.getDate（）==date.getDate（）&&d.getMonth（）==date.getMonth（）&&d.getFullYear（）==date.getFullYear（）
});
返回highlightDate？特殊日期“：”；
};我有一个日期数组，是否可以突出显示这些日期？当然，您可以扩展函数以检查该日期是否在数组中，然后返回所需的CSS类。该函数将针对当前显示在日历上的每个日期进行评估。我已更新stackblitz以对照日期数组进行检查。从这里开始，您应该能够自行调整/排除故障。如果没有，请用您试图解决的问题更新您的问题。仅仅说
抛出错误
并没有真正的帮助。错误说明了什么？您使用的是哪种角度材质版本<据我所知，code>MatCalendarCellCssClasses
仅在版本7+中提供。您至少需要版本7.1.0的角材质。请参见，它是在7.1.0中为我添加的。但我想知道是否有一种方法可以随时呈现日历？
.special-date {
  background-color: red;
}

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

<div *ngIf="datas">
  <mat-calendar [dateClass]="dateClass()" ></mat-calendar>
 </div>

dateClass() {
  return (date: Date): MatCalendarCellCssClasses => {
    const highlightDate = this.datas.map(strDate => new Date(strDate))
      .some(d => d.getDate() === date.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() === date.getFullYear());
    return highlightDate ? 'special-date' : '';
  };
}


ngOnInit() {
  this.studentreportsService.getHeatMap(this.studentid)
  .subscribe(data => {
    this.datas = data; // ["2019-01-22", "2019-01-24"]
  });
}