angular - primeNG日历上禁用日期的样式不起作用

Question

我正在尝试为 primeNG 日历上的一些禁用日期添加样式，在文档中建议使用 disabledDateTemplate。但是，这似乎不起作用，我也无法在网上找到单一的解决方案。

Answer 1

您可以像这样覆盖禁用日期的样式

样式.css

p-calendar td span.p-disabled {
  color: red !important;
  background: orange !important
}

或者您可以设置一个自定义类，这样样式就不会影响所有组件

模板

<p-calendar styleClass="custom-theme" 
            [(ngModel)]="dateValue" 
            [disabledDates]="invalidDates" 
            [disabledDays]="[0,6]" 
            [readonlyInput]="true">
</p-calendar>

样式.css

p-calendar .custom-theme  td span.p-disabled {
  color: #fff !important;
  background: darkred !important
}

演示