更改 PrimeFaces 日程安排器事件的颜色

Question

我正在使用primefaces（3.0）调度程序组件。

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

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

现在我想根据唯一性更改这些事件的颜色。例如，对于每个员工，将有一个唯一的ID与之关联。

因此，对于员工ID 1，事件颜色将是蓝色，对于ID 2，事件颜色将为红色，依此类推。

如何从后端bean应用颜色到这些事件呢？ 有什么线索吗....

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

- Java

Answer 1

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

示例：

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

CSS中，Damian的回答很好。

- Marco R

---

我在数据库中保存了颜色，如何将其应用于样式类？ - Irfan Nasim

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版本，请参见其他答案

- damian

---

对于PrimeFaces 4或5，需要不同的CSS。请参见我在以下问题中的答案：http://stackoverflow.com/questions/21688617/primefaces-schedule-event-color-is-not-working-after-replacing-primefaces-jar-3 - ipa

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;
 }

- Bipin

Answer 4

在Primefaces 7.0中，CSS选择器需要更改。您应该使用.fc-bg。

使用以下CSS代码：

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

使用Java代码设置样式保持不变。

- Kukeltje

Answer 5

您可以在样式表中定义样式类，并在后端Bean中使用方法将样式类设置为DefaultScheduleEvent实例：

public void setStyleClass(String styleClass)

- tomi

---

如何从数据库中获取背景颜色并将其应用于此类？ - Irfan Nasim

Answer 6

在代码中设置了styleClass后，PrimeFaces 5.2中的着色对我没有起作用，就像上面描述的那样。最终，我使用了important修饰符使其正常工作：

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

- wmiki

---

除非真的、真的、真的需要，否则不要使用!important。更好的方法是使您的选择器更具体……（例如，没有明确指示这仅适用于日程组件，使用选择器中的“.fc-event-inner”更好）。 - Kukeltje

感谢您的评论。我完全同意，但是我尝试使用不同的类（甚至列出了我在检查详细信息中看到的所有内容），但没有任何作用。此外，我确保我的CSS是最后加载的。这就是为什么我添加了我的解决方案-其他人对我没有用。我正在使用Spark主题。 - wmiki

Spark本身是否使用!important？这可能会解释一些问题。 - Kukeltje