How to Refresh Mat-Calendar After Changing The Background of Highlighted Dates

How to refresh mat-calendar after changing the background of highlighted dates

You can simply use MatCalendar.updateTodaysDate() to re-render it.

@ViewChild(MatCalendar) calendar: MatCalendar<Date>;

someEvent(){
    this.calendar.updateTodaysDate();
}

Highlighting certain dates in mat-calendar

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.

How to autofocus with highlight blue color on today date in datepicker of angular material?

You need to use ng-deep for the above case.
You have two classes here
We need to override these classes and provide our styles.

1.mat-calendar-body-today
2.mat-calendar-body-selected

As the name specifies to today's date class mat-calendar-body-today is attached and Similarly to selected date class mat-calendar-body-selected is attached.

Update:-
I have tested it from my end and it works...

Add below code in your css
This will hide this class mat-calendar-body-today which we don't need.

::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected) { display: none; }

Angular Material Datepicker - Initial date styling

Following up from alin's answer, the table cell class .mat-calendar-body-active grabbed my attention.

Indeed, this is the class that should be used in combination with .mat-calendar-body-today, as opposed to .mat-calendar-body-selected.

I managed to access the today-date cell when datepicker is first focused like so:

/* SCCS alternative */
.mat-calendar-body-active {
    .mat-calendar-body-today {
        color: red;
        background-color: blue;
    }
}

/* CSS alternative */
.mat-calendar-body-active > .mat-calendar-body-today {
    color: red;
    background-color: blue;
}

dateClass attribute trigger only once in angular material matCalendar

I had to call the data using resolvers so they are available before my view is rendered.

---

Related Topics