PrimeNG p-calendar: change the background-color of the dates

Question

Hi I'm trying to customize the p-calendar but can't figure out how to change the color of the dates that are being displayed. Please Help. Thanks in advance.

This is my template:

<div class="p-field p-col-12 p-md-4">
    <label for="time">Time</label>
    <p-calendar [(ngModel)]="date7" [showTime]="true" [inline]="true" inputId="time"></p-calendar>

</div>

My Css:

  ::ng-deep .ui-datepicker .ui-datepicker-group {
     background-color: whitesmoke;
 }

  
  ::ng-deep .ui-datepicker .ui-widget-content {
     border: 1px solid #888888;
     font-weight: normal;
     color: #000000;
     background-color: red

 }

Which version of PrimeNG do you use? – Antikhippe Nov 10 '20 at 11:42 — Antikhippe, Nov 10 '20 at 11:42

score 2 · Accepted Answer · edited Nov 10 '20 at 11:56

2

Use .p-datepicker instead of .ui-datepicker

CSS:

::ng-deep .p-datepicker table td > span {
  background-color: orange;
}

::ng-deep .p-datepicker table td.p-datepicker-today > span {
  background-color: burlywood;
}

See demo

edited Nov 10 '20 at 11:56

Pankaj Parkar

134,766
23
234
299

answered Nov 10 '20 at 11:52

Antikhippe

6,316
2
28
43

PrimeNG p-calendar: change the background-color of the dates

1 Answers1