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

问题描述

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

HTML

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

TS

onSelect(event){this.selectedDate= 事件；}

我需要什么:

解决方案

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

将您的模板更改为:

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

并在您的组件中添加 dateClass 函数，该函数将生成一个返回 MatCalendarCellCssClasses 类型的函数，它可以像表示 CSS 类的字符串一样简单应用(或类名数组):

dateClass() {返回(日期:日期):MatCalendarCellCssClasses =>{如果 (date.getDate() === 1) {返回特殊日期"；} 别的 {返回;}};}

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

.special-date {背景颜色:红色；}

<块引用>

这里是一个堆栈闪电战，将每个月的第一天涂成红色.

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;
}

What I need:

解决方案

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

Change your template to this:

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

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;
    }
  };
}

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.

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