Angular Material Datepicker DateClass

Question

How can i update dateClass manually in a function? datepicker

HTML

<mat-datepicker
    [dateClass]="dateClass"
    #picker
    fxLayoutAlign="start start"
    (opened)="appendFooter()"
  >
  </mat-datepicker>

TS

dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
...
};

Answer 1

I had some weird behaviour in my application that was faking the result. I fixed it. My final solution:

document.querySelectorAll('.mat-calendar-body-cell-content'); 
elements.forEach((x) => {let day: number = parseInt(x.textContent);

In the end i read the numbers in the calendar and compared them with a date. Its not the best solution but it works.

Thanks to @Eliseo for the right idea with the linked solution

Answer 2

One aproach can be you binding the dateclass to a function that return a function (date: Date)=>string|null)

Imagine some like

dateClass(type:any) {
    switch (type)
    {
       case 0:
         return (date: Date): MatCalendarCellCssClasses => {
           ...
         }
         break
       case 1:
         return (date: Date): MatCalendarCellCssClasses => {
           ...
         }
         break
}

You can to have a variable type and use

 <mat-datepicker [dateClass]="dateClass(type)">...</mat-datepicker>

But take account that the "dateClass" function is executed only when you open the datepicker or when you change the month (one time for each day)

I feel you're looking for some like this SO. Well, you can take the aproach and call to the function "changeMonth" when you make a click