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
}