Change the color of primefaces Scheduler Event

Question

I am using primefaces(3.0) scheduler component.

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

As we can see here there there are some events create

Answer 1

if you need, add style class and data in the same event.

Example:

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

In the CSS, Damian's response is good.

Answer 2

There's a constructor for DefaultScheduleEvent that takes a CSS class as parameter:

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 and emp2 are the style classes.

For PrimeFaces 3.0 add the following css to your style sheet:

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

For other PrimeFaces versions, see the other answers

Answer 3

apply this code when use 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 and emp2 are the style classes. Then add the following css to your style sheet:

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

Answer 4

After setting styleClass in code, coloring did not work for me in PrimeFaces 5.2 as described above. Finally I got it working with the important modifier:

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

Answer 5

In Primefaces 7.0 the CSS selector needs to be different. You should use .fc-bg

Work with the follow CSS code:

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

Setting the style from the javacode stays the same

Answer 6

You can define style classes in stylesheet and in backing bean set style class to DefaultScheduleEvent instance with method:

public void setStyleClass(String styleClass)