Custom Date class for Angular Material Date Picker

Question

I am able to use Date picker to highlight different dates in different colors as shown here: https://material.angular.io/components/datepicker/examples#datepicker-date-class https://stackblitz.com/angular/xxjleavorkm?file=src%2Fapp%2Fdatepicker-date-class-example.html

I however, would like to highlight different dates in different colors. For example, 1 in orange and 20 in green. How do I specify different colors for different dates?

If I use lets say two methods for this, how do I use them in the dateClass binding?

dateClass1: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    // Only highligh dates inside the month view.
    if (view === 'month') {
      const date = cellDate.getDate();
      console.log(date);
      // Highlight the 1st of each month.
      return date === 1? 'orangeClass' : '';
    }

    return '';
  };

  dateClass2: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    // Only highligh dates inside the month view.
    if (view === 'month') {
      const date = cellDate.getDate();
      console.log(date);
      // Highlight the 20th day of each month.
      return date === 20? 'greenClass' : '';
    }

    return '';
  };

HTML:

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected" [dateClass]="?"  #picker></mat-calendar>
</mat-card>

Answer 1

dateClass is a function that received as argument the "date" and return a string that it's the name of a class. This function is executed 28, 30 or 31 times (one for day). So you can do

dateClass1: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    if (view === 'month') {
      console.log(cellDate) //it's, e.g. 16th may 2023 it's of type javaScript Date

      //you can ,e.g.
      const date = cellDate.getDate(); //the day of the date object
      return date === 16? 'orangeClass' :date==20? 'greenClass':'';
    }

    return '';
  };

Generally you have an array with the dates and the "class", e.g.

days=[
  {date:'2023-07-13',className:'green'}
  {date:'2023-07-21',className:'red'}
  {date:'2023-07-27',className:'red'}
]

And you function like

 dateClass1: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    if (view === 'month') {
      const datestr=cellDate.getFullYear()+'-'
                    ('00'+(cellDate.getMonth()+1).slice(-2)+'-'+
                    ('00'+cellDate.getDate()).slice(-2)
      return this.days.find(x=>x.date==datestr)?.className|| ''
    }

    return '';
  };

Or you have an array with only the day of the month

days=[
  {day:13,className:'green'}
  {day:21,className:'red'}
  {day:27,className:'red'}
]

And your function

 dateClass1: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    if (view === 'month') {
      const day=cellDate.getDate()
      return this.days.find(x=>x.day==day)?.className|| ''
    }

    return '';
  };