style for disabled dates on primeNG calendar not working

Question

I'm trying to add styling for some disabled dates on primeNG calendar, in the documentation it's suggested to use disabledDateTemplate. However, that does not seem to work and I couldn't find a single solution online either.

Answer 1

you can overwrite the style of disabled date like this

style.css

p-calendar td span.p-disabled {
  color: red !important;
  background: orange !important
}

or you can set a custom class so the style will not effect all component

template

<p-calendar styleClass="custom-theme" 
            [(ngModel)]="dateValue" 
            [disabledDates]="invalidDates" 
            [disabledDays]="[0,6]" 
            [readonlyInput]="true">
</p-calendar>

style.css

p-calendar .custom-theme  td span.p-disabled {
  color: #fff !important;
  background: darkred !important
}

demo