如何更改原始日历高度？

Question

如何改变原始日历的高度而不是输入域。

​

​

更新1：

应用下面的样式后，日历显示如下

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

​

​

Answer 1

您可以覆盖以下类别的主ng日历

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

还可以在下面添加css：

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

Answer 2

我已经尝试了所有这些解决方案，它对我不起作用，所以基本上我们需要减少日期选择器的td元素之间的填充，尝试覆盖/使用下面的类。

 //first try below
**body .p-datepicker table td {
    padding: 0.13rem; // use as per your requirement.
  }** 

 //if not working above then use with ng:deep

 **::ng-deep .p-datepicker table td {
            padding: 0.13rem; // use as per your requirement.
          }** 

注意:这些类在primeng版本>=10之后工作，因为以前它们使用的是ui-datepicker类。 in primeng v10现在它们使用p-datepicker前缀p-而不是ui

see below images

Answer 3

使用样式或styleClass

<p-calendar [styleClass]="'custom-height'"></p-calendar>

在您的css中使用以下内容：

.custom-height:{height:300px}