Color of Event on

Question

I'd like to change the color of an event on schedule. After googling, I found those links: primefaces schedule event color is not working after replacing Primefaces Jar 3.3 by 4.0 and Change the color of primefaces Scheduler Event . But neither of them worked for me.

This is the HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 
 <h:head>
     <f:facet name="first">
         <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>SARSOURA | Appoint a Meeting</title>
  </f:facet>
        <link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
        <style>
   body 
   {
       background: #e6e6e6;
      }
     </style>
     <style type="text/css">
      .value 
      {
          width: 900px;
      }
  </style>
 </h:head>
 <body>
  <h:form>
   <center>
       <p:growl id="messages" showDetail="true" />
     <h:panelGrid columnClasses="value">
           <p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2">
       <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
               <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
               <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
               <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />
      </p:schedule>
       </h:panelGrid>
   
       <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
           <h:panelGrid id="eventDetails" columns="2">
               <p:outputLabel for="title" value="Titles:" />
               <p:inputText id="title" value="#{scheduleView.event.title}" required="true" />
    
               <p:outputLabel for="from" value="From:" />
               <p:calendar id="from" value="#{scheduleView.event.startDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/>
    
               <p:outputLabel for="to" value="To:" />
               <p:calendar id="to" value="#{scheduleView.event.endDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/>
    
               <p:outputLabel for="allDay" value="All Day:" />
               <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />
    
               <p:commandButton type="reset" value="Reset" />
               <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addNewEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
           </h:panelGrid>
       </p:dialog> 
   </center>
  </h:form>
 </body>
 <p:graphicImage value="/resources/icons/Footer.png" style="text-align:center"/> 
</html>

And this is what I put on the bean ScheduleView.java:

eventModel.addEvent(new DefaultScheduleEvent("Teaching", samiaFridaySA1(), samiaFridaySA2(),"emp1"));

On the file style.css, I have:

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

Have you please any idea about solving this problem. Any suggestion is appreciated.Thanks a lot.

sure your css selector is correct? Play with it in your favourite browser developer tool — Kukeltje, Mar 06 '17 at 11:30

score 0 · Accepted Answer · answered Mar 06 '17 at 12:48

You have to put instead of and insert the file style.css. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 
 <h:head>
     <f:facet name="first">
         <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>SARSOURA | List of Persons</title>
  </f:facet>
        <link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
        <style>
   body 
   {
       background: #e6e6e6;
      }
      .ui-datatable-odd
         {
             background: none repeat scroll 0 0 #ffbbff;
         }
         .outputTooltip 
   {
    color: #e6e6e6;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
   }
   .outputFullLabel 
   {
    color: #2F3030;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
   }
   .outputLabelIfoA
   {
    color: #000000;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
   }
   .outputLabelIfoa
   {
    color: #666666;
    font-size: 7px;
   }
   .backButton
   {
    background-color: #ffb3ec;
   }
     </style>
     <style type="text/css">
      .value 
      {
          width: 900px;
      }
  </style>
 </h:head>
 <h:body>
  <h:outputStylesheet name="style.css"/>
  <h:form>
   <center>
       <p:growl id="messages" showDetail="true" />
     <h:panelGrid columnClasses="value">
           <p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2">
       <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
               <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
               <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
               <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />
      </p:schedule>
       </h:panelGrid>
   
       <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
           <h:panelGrid id="eventDetails" columns="2">
               <p:outputLabel for="title" value="Titles:" />
               <p:inputText id="title" value="#{scheduleView.event.title}" required="true" />
    
               <p:outputLabel for="from" value="From:" />
               <p:calendar id="from" value="#{scheduleView.event.startDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/>
    
               <p:outputLabel for="to" value="To:" />
               <p:calendar id="to" value="#{scheduleView.event.endDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/>
    
               <p:outputLabel for="allDay" value="All Day:" />
               <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />
    
               <p:commandButton type="reset" value="Reset" />
               <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addNewEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
           </h:panelGrid>
       </p:dialog> 
   </center>
  </h:form>
 </h:body>
 <p:graphicImage value="/resources/icons/Footer.png" style="text-align:center"/> 
</html>

HTH.

Thanks @saria a lot for your help. It works as well. – Jolia Mar 06 '17 at 12:58 — Jolia, Mar 06 '17 at 12:58

score 0 · Answer 2 · answered Mar 06 '17 at 12:59

you can specify the style of the event on ScheduleView.java:

even = new DefaultScheduleEvent(new DefaultScheduleEvent("Teaching", samiaFridaySA1(), samiaFridaySA2(),"emp1");
even.setStyleClass(".emp1");
scheduleModelDisponibilite.addEvent(even);

and put the style on your main html page :

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

Rinrin m · Answer 3 · 2019-01-18T15:48:57.347

-3

If I do not work with Billy dekar:

a.PorAsignar {
                background: #CFD8DC !important;
                border-color: black!important;
            } 

DefaultScheduleEvent evento = new DefaultScheduleEvent();
evento.setStyleClass("PorAsignar");

edited Jan 18 '19 at 15:48

answered Jan 18 '19 at 15:00

Rinrin m

1
1

I fail to understand your answer. It seems identical to the others but less readable – Kukeltje Jan 18 '19 at 15:24
a.PorAsignar { background: #CFD8DC !important; border-color: black!important; } DefaultScheduleEvent evento = new DefaultScheduleEvent(); evento.setStyleClass("PorAsignar"); – Rinrin m Jan 18 '19 at 15:45
background: #CFD8DC !important; – Rinrin m Jan 18 '19 at 15:45
??? Sorry but this is code and not a comment/explanation. And sorry code in comments is hardly readable and even less if not escaped in backticks. And it is till totallty unclear (and off-topic: using `!important` should be a last resort. More specific selectors are the way to go – Kukeltje Jan 18 '19 at 15:48
that's why if it does not work for you, use that. If I do not work with 'Billy dekar' person or user – Rinrin m Jan 18 '19 at 15:54
You should use a More specific selector Than – Kukeltje Jan 18 '19 at 17:16

Color of Event on

3 Answers3