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 created with color blue.

Now I want to change the color of these events, on the basis of uniqueness. As a example for each empolyee there will be a unique ID associated.

So for lets say for employee ID 1 Events color will be blue, for ID 2 events color will be red and so on.

how can I apply colors to these number of events from backing bean ? Any clue....

I am able to change the background color for scheduler in this way, but dont have any idea about how to change the color of events ?

score 12 · Accepted Answer · edited Nov 19 '12 at 22:03

12

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.

edited Nov 19 '12 at 22:03

markus

40,136
23
97
142

answered Nov 19 '12 at 21:37

Marco R

306
2
11

i have color saved in db, how can i give color to that styleclass? – Irfan Nasim Dec 16 '15 at 06:28

score 4 · Answer 2 · edited Jul 09 '19 at 20:33

4

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

edited Jul 09 '19 at 20:33

Kukeltje

12,223
4
24
47

answered Aug 17 '12 at 12:15

damian

4,024
5
35
53

2

for primefaces 4 or 5 a different css is needed see my answer of this question: http://stackoverflow.com/questions/21688617/primefaces-schedule-event-color-is-not-working-after-replacing-primefaces-jar-3 – ipa May 17 '14 at 18:21

score 1 · Answer 3 · answered Jun 27 '14 at 08:51

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

score 1 · Answer 4 · answered Jul 09 '19 at 18:47

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

score 0 · Answer 5 · answered Aug 17 '12 at 12:13

0

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

public void setStyleClass(String styleClass)

answered Aug 17 '12 at 12:13

tomi

706
1
6
21

how to give this class background-color got from db? – Irfan Nasim Dec 16 '15 at 06:29

score -1 · Answer 6 · answered Aug 26 '15 at 10:01

-1

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

answered Aug 26 '15 at 10:01

wmiki

63
5

Don't use !important unless really, really, really needed. Better is to make your selector more specific... (there is e.g. no explicit indication this is only for a schedule component, the answer with the '.fc-event-inner' in the selector is better) – Kukeltje Aug 26 '15 at 13:30
Thanks for your comment. I totally agree but I tried to use different classes (even listing all what I saw in inspection details) but nothing worked. Also I ensured that my css is loaded as last. That's why I added my solution - the others did not work for me. I'm using Spark theme. – wmiki Aug 27 '15 at 22:54
Does spark them use !important itself? That might explain things – Kukeltje Aug 28 '15 at 07:16

Change the color of primefaces Scheduler Event

6 Answers6

Linked

Related