How to modify the primeng p-calendar style? - html

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

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 4

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