How to Modify the Primeng P-Calendar Style

PrimeNG Calendar - Override the default style

You can't tweak a child component's css, it breaks encapsulation. This will work but is deprecated:

::ng-deep .ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

This is essentially the same as adding it to your global stylesheet. However, the global styles will be applied only when the component has loaded for the first time, making it uber crappy. For safety, you can wrap your component in an "only-style-this" class and do:

::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
  ...
}

Alternatively, prime-ng usually allows you to pass styles in with most its components.

If you look at the docs you will find that there is a style property you can use. There are also other properties you might want to play with like inputStyle.

Change style of time picker in primeng calendar

::ng-deep .ui-timepicker.ui-widget-header{
  padding:initial;
  font-size:smaller;
}

actually works, font is smaller, but the padding is still same, because primeng has:

body .ui-datepicker .ui-timepicker {
    border: 0 none;
    border-top: 1px solid #d8dae2;
    padding: 0.857em;
}

which has higher specifity than your style.

You can increase the specifity for your style:

::ng-deep div.ui-datepicker .ui-timepicker{
  padding:initial;
  font-size:smaller;
}

Stackblitz demo

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

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

Why I can't set PrimeNG p-calenar component CSS style?

I believe that the problem is the encapsulation.

You should put your css rules in your global style.css, otherwise
Angular by default will hide the styles of one component to another when view-encapsulation has it's default values in the components.

That's the reason you see the ng-tns-c59-5 inside your dev tools.

See that example: https://stackblitz.com/edit/p-calendar-svpn8n?file=src/styles.css

For more info: https://angular.io/api/core/ViewEncapsulation

---

Related Topics