Unable to change the primeng calendar style

Question

I am using primeng '7.0.0' for the p-calendar component. when I click on the datepicker icon the calendar component is opening in the upside direction (Pic below).

I want to reduce the width and height of this component. I tried the below code but it didn't work.

calendar.html

<p-calendar
  value="#{property.propDate}" id="date"
  [showIcon]="true"
  [utc]='true'
  (onSelect)="sendCalendarTimeValueToParent()"
  placeholder="{{ timePickerPlaceHolder }}"
  [showTransitionOptions]="'100ms'"
  [hideTransitionOptions]="'100ms'"
  [inputStyle]="{ width: '100px' }"
  [(ngModel)]="value"
  [defaultDate]="defaultDate"
  showTime="true"
  [readonlyInput]="true"
  hourFormat="24"
  showButtonBar="true"
  [clearButtonStyleClass]="'clear-button'"
  [timeOnly]="true">
</p-calendar>

calendar.css

.ui-calendar .ui-datepicker {
  height : 200px;
}

.ui-datepicker td span, .ui-datepicker td a {
  padding: 0px;
}

Can anyone please tell me what am I doing wrong?

Answer 1

I have seen the css of this calendar and I can tell you this.

1.If you want to limit the width, you can do it from .ui-datepicker class, as this is where it is exposed. You can't do wonders (as after a while the css breaks), but there is some margin for limiting it.

.ui-calendar .ui-datepicker {
  width: 15em;
}

2.You can affect the height that way. The implementation is done with pseudo ::before elements, which don't take up any space in the calculation. What you need it to limit the height of said elements. What I managed to do, was to limit the padding of the hour/minute picker this way:

.ui-timepicker {
    padding: 0px !important;
}

Generally you can't limit the height of the inside elements when they take up standard heights and not a percentage of the parent.