How to modify the primeng p-calendar style?

primeng p-calendar input styleclass
primeng calendar
primeng calendar change size
p-calendar style not working
primeng calendar example
primefaces calendar
how to customize primeng calendar
p-calendar date format

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

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 !

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� With ViewEncapsulation.None you could write a style for p-menu like:.ui-menu {margin:0;} and it would work, overriding the default PrimeNG style, since encapsulation is turned off. With ViewEncapsulation.Emulated (Angular's default setting) in order to get the style above to work you have to "pierce" the view encapsulation as i mentioned.

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

calendar styling - Prime Community Forum, For example, to customize ui-widget-content only for calendar;. Code: Select all . ui-datepicker.ui-widget-content { custom css here }. Top� Old version Primefaces stylesheet overrides the JQuery datepicker. Hence the accessible JQuery datepicker doesn’t work. I have tried suggestions like putting the <h:outputStylesheet in the body, using <f:facet last, etc…still the Primefaces stylesheet and scripts are last in order; i.e. not the one from datepicker.

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
}

p:calendar - width - Prime Community Forum, <p:calendar styleClass="dateTimeField" /> and CSS . UI Development with PrimeNG: https://github.com/ova2/angular-develop th-primeng With this in the css file. To Modify Width you can use <p:calendar size="5" >. 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

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
}

p-calendar style � Issue #5742 � primefaces/primeng � GitHub, What is the motivation / use case for changing the behavior? Please tell us about your environment: Angular version: 5.X. PrimeNG version: 5.X. Primeng Calendar. In this tutorial, We are going to learn the Basics of Priming calendar with examples. Primeng is a group of Rich UI elements for Angular 6 library.

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.

width for calendar component � Issue #810 � primefaces/primeng , Please add the witdh property to inputfield of calendar control to correctly size it forms. is thare any possible to change p-calender size� Primeng table Tutorial Primeng Angular Tutorials with examples. Primeng is an Angular open-source framework for a collection of Rich UI libraries. Primefaces is the author of primeng framework. Please see this post for more information. In every application, there is a need to display the large data in table form from the database in the User

prime-ng-calendar, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 11.2k. 127. Files. app. I am using modal dialogue and p-calendar inside it, but due to incremental z-index feature of primeNG, calendar goes in background as I click on modal's input field of p-calendar. Is there any fix provided by PrimeNG on this, other than setting z-index manually (at a higher value) to DOM handle.? Expected behavior

How to modify the primeng p-calendar style?, Did you try to change the styling classes? See https://www.primefaces.org/ primeng/#/calendar (section styling) Like for example .ui-calendar .ui-inputtext� I believe this is a z-index issue : When using within a template <p-calendar *ngSwitchCase="'termStartDate'" [showIcon]="true"></p-calendar> When clicking on the calendar to open it - it is hidden under the table itself:

p-calendar as per LF UI Standards, app.component'; // Import PrimeNG modules import {AccordionModule} from font-style: italic; } p-calendar.lf-calendar input:-ms-input-placeholder { color: in angular.io) * System configuration for Angular samples * Adjust as necessary for � Please add the witdh property to inputfield of calendar control to correctly size it forms

Comments
  • can you please put up a working fiddle with the dependencies to play around?
  • @AllanJebaraj there are lot of dependency. But when we tried on the browser by changing the classes like ´.ui-widget.ui-state:disabled´, it worked fine. But same thing not working when we changed in our system.
  • this is exactly correct. In our case we use :host ::ng-deep Also you can do it directly with <p-calendar [ngStyle={margin: 0}]> but that is super ugly....don't do that :)
  • Actually there are lot of dependency classes, we tried to change all but not working. But when we change it in the browser directly for classes like ´.ui-widget.ui-state:disabled´, it's working perfect.
  • Applying your own styles to primeNg components is feasible but boring.