Подсветка определенных дат в мат-календаре

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

В дополнение к ответу Фабиана, если у вас проблемы с отображением выделенного цвета и вы используете lazy loading компоненты, не забудьте добавить ::ng-deep перед классом.Вот так:

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

Ура!

Answer 2

Вы можете использовать входную привязку dateClass, как описано в документации по угловым материалам здесь . Примечание: Для этого требуется версия 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;
}

Здесь - это стек, который окрашивает первое число каждого месяца в красный.