jsf-2 - 更改 primefaces 调度程序事件的颜色

Question

我正在使用 primefaces(3.0) 调度程序组件。

http://www.primefaces.org/showcase-labs/ui/schedule.jsf

正如我们在这里看到的，有一些用蓝色创建的事件。

现在我想在唯一性的基础上改变这些事件的颜色。例如，每个员工都会有一个相关联的唯一 ID。

因此，假设员工 ID 1 的事件颜色为蓝色，ID 2 的事件颜色为红色，依此类推。

如何从支持 bean 将颜色应用于这些数量的事件？任何线索....

我可以通过这种方式更改调度程序的背景颜色，但不知道如何更改事件的颜色？

Answer 1

如果需要，请在同一事件中添加样式类和数据。

例子：

String id="2";
DefaultScheduleEvent evento = new DefaultScheduleEvent("titule", new Date(), new Date(), id);
evento.setStyleClass("event-close");   

在 CSS 中，Damian 的反应很好。

Answer 2

DefaultScheduleEvent 有一个以 CSS 类作为参数的构造函数：

eventModel = new DefaultScheduleModel();  
eventModel.addEvent(new DefaultScheduleEvent("Event for employee 1", new Date(), laterToday(), "emp1"));
eventModel.addEvent(new DefaultScheduleEvent("Event for employee 2", tomorrow(), laterTomorrow(), "emp2"));  

emp1 和 emp2 是样式类。

对于 PrimeFaces 3.0，将以下 css 添加到您的样式表中：

.emp1 .fc-event-skin {
    background: red;
}
.emp2 .fc-event-skin {
   background: green;
 }

对于其他 PrimeFaces 版本，请参阅其他答案

Answer 3

使用 primefaces 4.0 时应用此代码

eventModel = new DefaultScheduleModel();  
eventModel.addEvent(new DefaultScheduleEvent("Event for employee 1", new Date(), laterToday(), "emp1"));
eventModel.addEvent(new DefaultScheduleEvent("Event for employee 2", tomorrow(), laterTomorrow(), "emp2"));  

emp1 和 emp2 是样式类。然后将以下 css 添加到您的样式表中：

.emp1 .fc-event-inner {
    background: red;
}
.emp2 .fc-event-inner {
   background: green;
 }

Answer 4

在 Primefaces 7.0 中，CSS 选择器需要有所不同。你应该使用.fc-bg

使用以下 CSS 代码：

.specialEvent .fc-bg {
    background-color: red;
    border-color: red;
    color: white;
    opacity: 1;
}

从 javacode 设置样式保持不变

Answer 5

您可以在样式表和支持 bean 中定义样式类，将样式类设置为DefaultScheduleEvent使用方法的实例：

public void setStyleClass(String styleClass)

Answer 6

在代码中设置 styleClass 后，如上所述，在 PrimeFaces 5.2 中着色对我不起作用。最后，我使用了重要的修饰符：

a.emp1 {
   background: #D0525D !important;
   border-color: #932c39!important;
}