htmlcssangularprimengprimeng-calendar

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

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

 }
Solution

  • 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