angular mat-calendar how to change day header color for particular day of weak-CodePudding

Need to customize mat-calendar day header.

I want to change the color of the particular day header to different color for example Monday and Tuesday headers in red color. using DateClass I am able to change the particular day color but unable to customer day header.

CodePudding user response：

With CSS

A simple way to do this is to pass a custom class to the date-picker panelClass. The day letter is rendered in a th tag and each day does not have a unique indentifire, but selecting by order will solve this.

In your Template:

<mat-datepicker #picker panelClass="custom-header"></mat-datepicker>

In your css:

/** sunday **/
.custom-header .mat-calendar-table-header th:nth-child(1) span {
  color: red;
}
/** monday **/
.custom-header .mat-calendar-table-header th:nth-child(2) span {
  color: green;
}
/** tuesday **/
.custom-header .mat-calendar-table-header th:nth-child(3) span {
  color: pink;
}
/** wednesday **/
.custom-header .mat-calendar-table-header th:nth-child(4) span {
  color: grey;
}
/** thursday **/
.custom-header .mat-calendar-table-header th:nth-child(5) span {
  color: black;
}
/** friday **/
.custom-header .mat-calendar-table-header th:nth-child(6) span {
  color: blue;
}
/** saturday **/
.custom-header .mat-calendar-table-header th:nth-child(7) span {
  color: lightblue;
}

If you have different order of the weekdays for instance week start on monday, then you should write for each of these a class and conditionally pass the proper class through panelClass.

Other possible solution but not recommended

You could adjust the day color value in the component .ts file and query the days by letter, but as angular recommend to avoid manipulating dom elements in .ts files if possible. I would go for the css solution.

Edited

In case the colors are conditional or dynamic, then setting the color in the component .ts must be an option until Mat-Picker make this easier.

So here is my dynamic solution

open Picker open you could query the picker its given id and then query its children (the days letters). Then edit the styles dynamically by the angular Renderer2, which is more secure than setting the color style directly.

Checkout my adjusted stackblitz example