Highlighting certain dates in mat-calendar

Question

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

Answer 1

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:

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.