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

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 2

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 }