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

您可以使用输入绑定dateClass，如角材料文档 here。注意：这需要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;
}

Here 是一个堆叠式闪电战，每个月的第一天都用红色显示。

Answer 2

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

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

干杯！

Answer 3

如果通过服务加载数据，则必须在*ngIf="datas"上使用mat-calendar，以便在数据输入后调用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"]
  });
}

Answer 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' : '';
    };

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

4 个答案: