如何更改primeng日历高度？答案

【问题标题】：How to change the primeng calendar height?如何更改primeng日历高度？
【发布时间】：2022-03-28 14:57:38
【问题描述】：

如何更改primeng日历的高度而不是输入字段。

更新 1：

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

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

【问题讨论】：

标签： angular primeng

【解决方案1】：

您可以覆盖下面的prime ng日历类

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

在css下面也添加：

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

【讨论】：

您好，设置上述样式导致日历不一致。日期移出日历。
我刚刚给出了更改日历 css 的示例。您必须相应地管理其他 css 属性 html 结构...请分享您添加的屏幕截图和 css。我可以帮你
用截图更新问题
更新了我对您问题的回答。请检查

【解决方案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之后工作，因为以前他们在primeng v10中使用ui-datepicker class.enter image description here现在他们使用p-datepicker前缀p-而不是ui

see below images

【讨论】：

谢谢，使用::ng-deep 的第二个选项对我有用！

【解决方案3】：

使用 [style] 或 [styleClass]

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

在您的 css 中使用以下：

.custom-height:{height:300px}

【讨论】：

【解决方案4】：

没有找到任何解决方案，所以我做了什么来降低压光机的高度

HTML：

<div class="container">
  <span class="ui-float-label">
    <p-calendar showTime="true" hourFormat="12" [(ngModel)]="value" inputId="text" id="text" [showIcon]="true" [inline]="true"></p-calendar>
    <label id="inline-lable" for="text" class="ml-2">{{label}}</label>
  </span>
</div>

CSS：

.container ::ng-deep p-calendar .ui-datepicker table td {
  padding: 1px !important;
}
.container ::ng-deep p-calendar .ui-datepicker .ui-timepicker {
  padding: 2px 0 0 0 !important;
}
.container ::ng-deep p-calendar .ui-datepicker {
  padding: 0.857em 0.857em 0 0.857em !important;
}

之前：

之后：

【讨论】：

【解决方案5】：

覆盖primeng calender-widget height CSS：

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

【讨论】：

【解决方案6】：

我正在使用 PrimeNG v10。

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

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

或者使用 panelStyleClass，文档说：

panelStyleClass string null datetimepicker 容器元素的样式类。

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

【讨论】：

【解决方案7】：

把它放在你的全局样式表中，后面加上 !important，如下所示：

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

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

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

【讨论】：

【解决方案8】：

以下解决方案适用于我

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

【讨论】：

【解决方案9】：

一种解决方法是在 .p-datepicker td>span 上将 display 设置为 initial，如下所示：

.p-datepicker td>span {
    display: initial;
  }

然后你改变字体大小，从而改变宽度。

【讨论】：

【解决方案10】：

这个 CSS 适合我：

::ng-deep .p-datepicker table td {
  padding: 0.2rem !important;
}

::ng-deep .p-datepicker table td > span {
  width: 1.7rem;
  height: 1.7rem;
}

::ng-deep .p-datepicker table {
  font-size: 10pt;
  margin: -0.143rem 0;
}

::ng-deep .p-datepicker .p-datepicker-header {
  padding: 0.2rem;
}

【讨论】：