突出显示日历中的某些日期 [英] Highlighting certain dates in mat-calendar

问题描述

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

I am using mat-calendar. I am trying to highlight certain dates but I couldn't do it. There is no proper documentation for this.

HTML

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

TS

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

我需要什么:

推荐答案

您可以使用输入绑定dateClass，如 角材料文档 此处. 注意:这需要Angular Material版本至少为7.1.0

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类的字符串一样简单(或类名数组) :

And in your component add the dateClass function which will generate a function that will return a type of MatCalendarCellCssClasses, which can be as simple as a string representing the CSS class to apply (or an array of class names):

dateClass() {
  return (date: Date): MatCalendarCellCssClasses => {
    if (date.getDate() === 1) {
      return 'special-date';
    } else {
      return;
    }
  };
}

最后在styles.css中添加要应用的类:

And finally in your styles.css add the classes you want applied:

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

此处 是一个堆叠的闪电战，每个月的第一天都用红色上色.

Here is a stackblitz that colors the first of each month in red.

这篇关于突出显示日历中的某些日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！