angular - Markera vissa datum i mat-calendar

Jag använder mat-calendar. Jag försöker markera vissa datum men jag kunde inte göra det. Det finns ingen ordentlig dokumentation för detta.

HTML

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

TS

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

Vad jag behöver:

Svar #1

Du kan använda inmatningsbindningen dateClass som beskrivs i Angular Material-dokumentationen här. Observera: Detta kräver en Angular Material-version på minst 7.1.0

Ändra din mall till detta:

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

Och i din komponent lägger du till dateClass-funktionen som kommer att generera en funktion som kommer att returnera en typ av MatCalendarCellCssClasses, vilket kan vara så enkelt som en sträng som representerar CSS-klassen att tillämpa (eller en array av klassnamn):

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

Och slutligen, i din styles.css, lägg till de klasser du vill använda:

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

Här är en Stackblitz som färgar den första dagen i varje månad i rött.

Svar #2

Som ett komplement till Fabians svar, om du har problem med att se den markerade färgen och använder lazy loading-komponenter, kom ihåg att lägga till ::ng-deep framför klassen. Så här:

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

Skål!

Relaterade artiklar