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

【问题标题】：Highlighting certain dates in mat-calendar在 mat-calendar 中突出显示某些日期
【发布时间】：2019-06-23 15:00:43
【问题描述】：

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

HTML

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

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

我需要什么：

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以使用输入绑定dateClass，如角材料文档 here。 注意：这需要至少 7.1.0 的 Angular Material 版本

将您的模板更改为：

<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 是一个堆栈闪电战，将每个月的第一天涂成红色。

【讨论】：

我有日期数组，是否可以突出显示这些日期？
当然，您可以扩展该函数以检查日期是否在您的数组中，然后返回所需的 CSS 类。该函数将针对当前显示在您日历上的每个日期进行评估。
我已更新 stackblitz 以检查日期数组。从这里您应该能够自行调整/排除故障。如果没有，请使用您尝试解决的问题更新您的问题。
只是说throwing error 并没有真正的帮助。错误说明了什么？您使用的是哪个 Angular Material 版本？据我所知，MatCalendarCellCssClasses 仅适用于版本 7+。
您至少需要 7.1.0 版本的 Angular Material。见changelog，它是在7.1.0中添加的

【解决方案2】：

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

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

干杯！

【讨论】：

【解决方案3】：

如果数据是通过服务加载的，那么你必须在mat-calendar上使用*ngIf="datas"，这样dateClass会在数据进来后调用。即：

html:

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

ts：

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"]
  });
}

【讨论】：

这对我有用。但我想知道有没有办法随时渲染日历？

【解决方案4】：

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

我通过将date 分配给new Date() 解决了这个问题。我的代码如下所示：

return (date: Date): MatCalendarCellCssClasses => {
      date = new Date(date); // <<< My edit
      const highlightDate = this.datesToHighlight
        .map(strDate => new Date(strDate))
        .some(d => {
          return d.getDate() === date.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() === date.getFullYear()
        });

      return highlightDate ? 'special-date' : '';
    };

【讨论】：