PrimeNG Calendar - Override the default style

Question

Using angular, I am using p-calendar in a component and created a CSS class that is called from my component. No matter what I do I am unable to override the style.

CSS

.ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

HTML

<div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
                                     !ersaForm.get('effectiveDt').valid
                                     }">
                                    <label for="effectiveDtId" class="control-label">Effective Date</label><br />

                                    <p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
                                                 inputStyleClass="form-control " 
                                                 class="ui-calendar ui-calendar-button"
                                                 [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  ></p-calendar>

                                </div>

****************************************************UPDATE****************************************

I changed my SCSS File to

::ng-deep .only-style-this .ui-calendar .ui-calendar-button { 
height: 34px !important; 
border-top-left-radius: 0 !important;
}

HTML

  <div class="form-group col-xs-3 col-md-3 only-style-this"
                                 [ngClass]="{
                                 'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
                                 !ersaForm.get('effectiveDt').valid
                                 }">
                                <label for="effectiveDtId" class="control-label">Effective Date</label><br />

                                <p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
                                             inputStyleClass="form-control" 

                                             styleCalss=".ui-calendar .ui-calendar-button"
                                             [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  ></p-calendar>

                            </div>

warning

Validation (CSS 3.0): "::ng-deep" is not a valid pseudo-element.

Answer 1

You can't tweak a child component's css, it breaks encapsulation. This will work but is deprecated:

::ng-deep .ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

This is essentially the same as adding it to your global stylesheet. However, the global styles will be applied only when the component has loaded for the first time, making it uber crappy. For safety, you can wrap your component in an "only-style-this" class and do:

::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
  ...
}

Alternatively, prime-ng usually allows you to pass styles in with most its components.

If you look at the docs you will find that there is a style property you can use. There are also other properties you might want to play with like inputStyle.

Answer 2

As in the following answer https://forum.primefaces.org/viewtopic.php?t=53756 just put your style as list item in the array of styles in the file angular.json

"styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/fullcalendar/dist/fullcalendar.min.css",
        "../node_modules/quill/dist/quill.snow.css",
          "../node_modules/nanoscroller/bin/css/nanoscroller.css",
        "styles.css"
      ],

then you can use your css freely

Answer 3

I use prime ng ver 12.xx override this ok for me on file style.css (Angular cli

.p-datepicker table td{ padding: 0px; }
.p-datepicker table td > span {  height: 45px;width: 50px; }