[Solved] How to modify the primeng p-calendar style?

I am trying to modify the primeng p-calendar, but it is not working properly.

For example:

I want it to be like this:required changes

But original it looks like this:original image

What i have tried so far:


<div class="nxui-form-group">
    <label for="planEndDate">
      <img src="assets/images/calendar.svg" class="nxui-icon-small nxui-icon-align-bottom">
      {{ 'i18n.all-damage-reports.label.plan-end-date' | translate }}

    <p-calendar formControlName="planEndDate"
                id= "planEndDate"
                [title]="'i18n.all-damage-reports.label.plan-end-date' | translate"
                [dateFormat]="'i18n.common.dateformat.shortdate-p-calendar' | translate"
                [locale]="'i18n.common.dateformat.calendar' | translate"


p-calendar.calendar-control  {
  opacity: 1;
  color: black;
  background: #eeeeee;

looking forward to inputs.


Enquirer: Blancho


Solution #1:

I think that you should use the special selectors of angular to change a component style like :host or ::ng-need, you can check that in the official documentation:


::ng-deep body .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
margin: 0;
padding: 0;
line-height: 1;
color: goldenrod;

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

Hope that’ll help you !

Respondent: K.Mouna

Solution #2:

Select element class via using Inspect then add ::ng-deep selector to force style on child components

::ng-deep .ui-inputtext {
/* Example */
    opacity: 1 !important;

Respondent: Mustafa Omran

Solution #3:

In my case, I want to style the calendar icon, html is below

<div class="main-container">
  <p-calendar showTime="true" hourFormat="12" [showIcon]="true"></p-calendar>

Then I added style below but it is not working:

.main-container ::ng-deep .ui-datepicker-trigger.ui-button {
  // add style here

Then I added p-calendar after ::ng-deep it worked

.main-container ::ng-deep p-calendar .ui-datepicker-trigger.ui-button {
  // add style here
Respondent: Saad Qamar

Solution #4:

Did you try to change the styling classes?
See https://www.primefaces.org/primeng/#/calendar (section styling)

Like for example

.ui-calendar .ui-inputtext {
  // place text styling here
Respondent: MoxxiManagarm

Solution #5:

The code you see in the templates is not what actually is in browser’s DOM. There are some other elements injected, like <input> for text input.

Try something like

p-calendar.calendar-control input {
  border: 1px solid black;
  background: #eeeeee;

And anyway, look at the actual elements in your browser with Inspect Element and write CSS according to the real situation.

Respondent: Sergey Kirienko

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.