Angular2+ material customize datepicker date view

Question

Is it possible to customize angular2+ material datepicker's date view like below?

The main libs and version:

angular: 5.2.9
@angular/material: 5.2.4

@PardeepJain, I tried, but the problem is I can't add dynamic classes to the different type of date — Chen Dachao

Chen Dachao Chen Dachao · Accepted Answer · 2019-02-21T09:57:16

Fortunately, I figure out how to resolve it finally.

Coz I'm using angular5, so one possible solution is like this, see below snippet:

setTimeout(()=>{
      let elements = document.querySelectorAll('.tracker');
      let x =  elements[0].querySelectorAll('.mat-calendar-body-cell');
      x.forEach(y => {
        let c = new Date(y.getAttribute("aria-label"));
        if(c < this.startDate){
          const cellContent = y.querySelector('.mat-calendar-body-cell-content');
          cellContent.classList.add('custom-calendar-cell');
        }
      });
    });

For angular6+, you can refer to this sample.

Angular2+ material customize datepicker date view

1 Answers