2

I would like to add some custom stylings for certain days shown in the mat-calendar component from angular material. After a little bit of research I came across the dateClass property which seems to be suited for this task. Though no matter what I tried, the calendar always looks the same.

My current setup looks like following:

calendar.component.ts:

dateClass = (date: Date): MatCalendarCellCssClasses => { return 'my-date'; }

calendar.component.html:

<mat-calendar [dateClass]="dateClass"></mat-calendar>

calendar.component.css:

.my-date { background-color: red; }

Assigning [dateClass] seems to have no effect at all. I would expect all days to have a red background but the calendar always looks the same: Angular Material Calendar

HDainester
  • 23
  • 3

1 Answers1

2

Update:

OP pointed out encapsulation: ViewEncapsulation.None is also needed, as it was included in the stackblitz demo.

Original:

Your css is too broad, thus it's not getting applied to anything. To apply the css to date buttons, try this:

button.my-date {
  background: red;
}

Stackblizt demo

Result:

enter image description here

Nehal
  • 13,130
  • 4
  • 43
  • 59
  • 1
    Thanks for the Stackblitz example! Turned out I was missing ViewEncapsulation.None. I'll make sure to make use of this service in the future to give better details on my questions. Btw. a broad class definition like '.my-date' seems to be no issue on my side, works as intended now. – HDainester Nov 17 '22 at 21:02
  • 1
    Btw, I noticed I my stack demo, the css doesn't work, if I remove the `button` from `button.my-date` – Nehal Nov 17 '22 at 21:44
  • Ah yes, you are right. I had marked my rules with `!important`, which also works but I wouldn't recommend it. – HDainester Nov 18 '22 at 08:11