如何更改 Angular 材质日期选择器的弹出日历样式

Question

I am only allowed to use Angular material (No Bootstrap or any other library).

How can I change the style of this popup calendar? Like the font, of the background color, or instead of circle I want it in square button like style or the arrows for navigating back and forth.

Answer 1

Just right click on the date picker and check what CSS class have used. Copy the CSS class name and write new CSS style with the same class name. In this way, you can overwrite the CSS style.

Suppose, the round/circle default CSS class is ".mat-calendar-body-cell-content". Now copy the class name and make a new class like below.

.mat-calendar-body-cell-content{
     background: #FFCC00 !important;
}

This new style will over right the existing CSS style.