how to change height and width of primeng v11.2.0 p-calendar?

Question

How to change height and width of below p-calendar of primeng version 11.2.0

https://primefaces.org/primeng/showcase/#/calendar

I want to use the above p-calendar on my Angular application.

I tried below CSS, but didn't worked.

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

Suggest me on this.

Answer 1

You can proportionally control the height of the date picker by reducing the cell padding of the date cells through these classes.

.p-datepicker table td{ //adjust the padding }
.p-datepicker table td > span { //adjust the width and height }

Answer 2

Adding few more points here. Use these styles in your styles.scss, it is parallel to index.html, also use !important at many places. You can also refer this link for more classes, https://www.primefaces.org/primeng/showcase/#/calendar

.p-datepicker table td{ //adjust the padding }
.p-datepicker table td > span { //adjust the width and height }

Answer 3

Try this. Working primeNG ver: 12.2 Angular (dayNamesMin translations must be 2 characters.Otherwise, the scroll bar will appear.)

::ng-deep {
    .p-datepicker td>span {
            width: 20px !important;
            height: 20px !important;
        }
}

Before ---> After