如何更改启动日历的高度？

Question

如何更改未输入日历的高度。

更新1：

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

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

Answer 1

您可以覆盖下面的主要日历类

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

还在css下方添加：

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

Answer 2

使用[style]或[styleClass]

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

在您的CSS中使用以下代码：

.custom-height:{height:300px}

Answer 3

找不到任何解决方案，所以我做了什么来减少压光机的高度

HTML：

mydate     myval counts result
   <date>     <dbl>  <int>  <dbl>
 1 2019-05-11    NA     NA    NA 
 2 2019-05-11    NA     NA    NA 
 3 2019-05-11  1500      4   375 
 4 2019-05-11  1500      4   375 
 5 2019-05-12  1500      4   375 
 6 2019-05-12  1500      4   375 
 7 2019-05-12    NA     NA    NA 
 8 2019-05-12    NA     NA    NA 
 9 2019-05-13    NA     NA    NA 
10 2019-05-13    NA     NA    NA 
11 2019-05-13  1100      6   183.
12 2019-05-13  1100      6   183.
13 2019-05-14  1100      6   183.
14 2019-05-14    NA     NA    NA 
15 2019-05-14   200      2   100 
16 2019-05-14   200      2   100 
17 2019-05-15  1100      6   183.
18 2019-05-15  1100      6   183.
19 2019-05-15  1100      6   183.
20 2019-05-15    NA     NA    NA 

CSS：

STF doctor

之前：

之后：

Answer 4

覆盖primeng日历小部件高度CSS：

 ::ng-deep .ui-datepicker.ui-widget{
    line-height: 0.5rem;
 }

Answer 5

我正在使用PrimeNG v10。

在每个用于日期选择器的控件上，您可以使用 panelStyle ：

<p-calendar [(ngModel)]='addTime.StartTime' [panelStyle]="{'height':'280px'}"></p-calendar>

或使用panelStyleClass，说明文档：

panelStyleClass 字符串null datetimepicker容器元素的样式类。

panelStyle 对象null datetimepicker容器元素的内联样式。

Answer 6

将其放在您的全局样式表中，并在后面添加！important：

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

但您可能会对日期选择器隐藏在按钮后面的事实感到恼火。 如果是这样，只需在您的p-calendar元素中添加appendTo =“ body”，如下所示：

<p-calendar appendTo="body" [(ngModel)]="myDate"></p-calendar>

Answer 7

以下解决方案对我有用

:host >>> .p-datepicker table td > span {
    height: unset;
    width: unset;
}