How to modify the primeng p-calendar style?

Question

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:

HTML

<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 }}
    </label>

    <p-calendar formControlName="planEndDate"
                class="calendar-control"
                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>
  </div>

CSS

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

looking forward to inputs.

Thanks

Answer 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:

https://angular.io/guide/component-styles

::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 !

Answer 2

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>
</div>

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
}

Answer 3

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; }

Answer 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
}

Answer 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.