css FullCalendar事件具有不饱和的背景色

efzxgjgh 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(156)

我正在使用fullCalendar的资源时间轴视图，我注意到事件背景颜色不饱和。
我已经使用了不同的方法来设置它们的颜色，包括使用CSS设置所有事件的背景颜色，一切都正常（即我没有问题改变事件颜色），除了颜色缺乏饱和度。
例如，像这样使用CSS：

div#calendar {
  background-color: red !important;
}
.fc-timeline-event {
  background-color: red !important;
}

我希望table背景和事件都是饱和的红色。背景是，但事件不是。用颜色采样器检查显示背景是#ff0000，但单元格是#ff5952，这对应于红色饱和到68%。
奇怪的是，浏览器检查器显示计算的背景颜色为#ff0000。
如何实现完全饱和的颜色显示的任何想法？

3条答案

我有办法。
在你的CSS样式代码中，你把下面的代码

.fc-bgevent {
    opacity: 1;
 }

上面的数字1可以改为0.9、0.8等。它将替换背景事件样式。
而且对我很有效！

Fullcalendar CSS包含一个规则，用白色覆盖日历，不透明度为25%。这会导致问题：

.fc-event .fc-bg {
    z-index : 1;
    background; #fff;
    opacity: 0.25
 )

不透明度需要设置为0。所以在我自己的样式表中添加了这个：

.fc-event .fc-bg {
    opacity: 0 !important;
}

在PrimeNg标签中，解决方案是：

::ng-deep .fc .fc-bg-event {
  opacity: 0.8;
}