2017-03-06 74 views
0

我想按计划更改事件的颜色。 谷歌搜索后,我发现这些链接: primefaces schedule event color is not working after replacing Primefaces Jar 3.3 by 4.0Change the color of primefaces Scheduler Event 。但既没有他们为我工作。<p:schedule />上的事件颜色

这是HTML页面:

<!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"> 
 
\t <h:head> 
 
    \t <f:facet name="first"> 
 
     \t <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> 
 
\t \t </f:facet> 
 
     <link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/> 
 
     <style> 
 
\t \t \t body 
 
\t \t \t { 
 
    \t \t \t background: #e6e6e6; 
 
    \t \t } 
 
    \t </style> 
 
    \t <style type="text/css"> 
 
\t \t  .value 
 
\t \t  { 
 
\t \t   width: 900px; 
 
\t \t  } 
 
\t \t </style> 
 
\t </h:head> 
 
\t <body> 
 
\t \t <h:form> 
 
\t \t \t <center> 
 
\t \t  \t <p:growl id="messages" showDetail="true" /> 
 
\t \t \t \t <h:panelGrid columnClasses="value"> 
 
\t \t   \t <p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2"> 
 
\t \t \t \t \t \t <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" /> 
 
\t \t    \t <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" /> 
 
\t \t    \t <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" /> 
 
\t \t    \t <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" /> 
 
\t \t \t \t \t </p:schedule> 
 
\t \t  \t </h:panelGrid> 
 
\t \t 
 
\t \t \t  <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip"> 
 
\t \t \t   <h:panelGrid id="eventDetails" columns="2"> 
 
\t \t \t    <p:outputLabel for="title" value="Titles:" /> 
 
\t \t \t    <p:inputText id="title" value="#{scheduleView.event.title}" required="true" /> 
 
\t \t \t 
 
\t \t \t    <p:outputLabel for="from" value="From:" /> 
 
\t \t \t    <p:calendar id="from" value="#{scheduleView.event.startDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/> 
 
\t \t \t 
 
\t \t \t    <p:outputLabel for="to" value="To:" /> 
 
\t \t \t    <p:calendar id="to" value="#{scheduleView.event.endDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/> 
 
\t \t \t 
 
\t \t \t    <p:outputLabel for="allDay" value="All Day:" /> 
 
\t \t \t    <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" /> 
 
\t \t \t 
 
\t \t \t    <p:commandButton type="reset" value="Reset" /> 
 
\t \t \t    <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addNewEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" /> 
 
\t \t \t   </h:panelGrid> 
 
\t \t \t  </p:dialog> 
 
\t \t \t </center> 
 
\t \t </h:form> 
 
\t </body> 
 
\t <p:graphicImage value="/resources/icons/Footer.png" style="text-align:center"/> 
 
</html>

而这就是我把豆ScheduleView.java

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

在文件的style.css,我有:

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

有请您对解决这个问题的任何想法。任何建议表示赞赏。非常感谢。

+0

确保您的CSS选择是正确的?在你最喜欢的浏览器开发工具中玩吧 – Kukeltje

回答

0

你必须代替并插入文件style.css。 试试这个:

<!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"> 
 
\t <h:head> 
 
    \t <f:facet name="first"> 
 
     \t <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> 
 
\t \t </f:facet> 
 
     <link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/> 
 
     <style> 
 
\t \t \t body 
 
\t \t \t { 
 
    \t \t \t background: #e6e6e6; 
 
    \t \t } 
 
    \t \t .ui-datatable-odd 
 
\t   { 
 
\t    background: none repeat scroll 0 0 #ffbbff; 
 
\t   } 
 
\t   .outputTooltip 
 
\t \t \t { 
 
\t \t \t \t color: #e6e6e6; 
 
\t \t \t \t font-family: Arial; 
 
\t \t \t \t font-size: 10px; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t } 
 
\t \t \t .outputFullLabel 
 
\t \t \t { 
 
\t \t \t \t color: #2F3030; 
 
\t \t \t \t font-family: Arial; 
 
\t \t \t \t font-size: 13px; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t } 
 
\t \t \t .outputLabelIfoA 
 
\t \t \t { 
 
\t \t \t \t color: #000000; 
 
\t \t \t \t font-family: Arial; 
 
\t \t \t \t font-size: 13px; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t } 
 
\t \t \t .outputLabelIfoa 
 
\t \t \t { 
 
\t \t \t \t color: #666666; 
 
\t \t \t \t font-size: 7px; 
 
\t \t \t } 
 
\t \t \t .backButton 
 
\t \t \t { 
 
\t \t \t \t background-color: #ffb3ec; 
 
\t \t \t } 
 
    \t </style> 
 
    \t <style type="text/css"> 
 
\t \t  .value 
 
\t \t  { 
 
\t \t   width: 900px; 
 
\t \t  } 
 
\t \t </style> 
 
\t </h:head> 
 
\t <h:body> 
 
\t \t <h:outputStylesheet name="style.css"/> 
 
\t \t <h:form> 
 
\t \t \t <center> 
 
\t \t  \t <p:growl id="messages" showDetail="true" /> 
 
\t \t \t \t <h:panelGrid columnClasses="value"> 
 
\t \t   \t <p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2"> 
 
\t \t \t \t \t \t <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" /> 
 
\t \t    \t <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" /> 
 
\t \t    \t <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" /> 
 
\t \t    \t <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" /> 
 
\t \t \t \t \t </p:schedule> 
 
\t \t  \t </h:panelGrid> 
 
\t \t 
 
\t \t \t  <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip"> 
 
\t \t \t   <h:panelGrid id="eventDetails" columns="2"> 
 
\t \t \t    <p:outputLabel for="title" value="Titles:" /> 
 
\t \t \t    <p:inputText id="title" value="#{scheduleView.event.title}" required="true" /> 
 
\t \t \t 
 
\t \t \t    <p:outputLabel for="from" value="From:" /> 
 
\t \t \t    <p:calendar id="from" value="#{scheduleView.event.startDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/> 
 
\t \t \t 
 
\t \t \t    <p:outputLabel for="to" value="To:" /> 
 
\t \t \t    <p:calendar id="to" value="#{scheduleView.event.endDate}" timeZone="GMT+2" pattern="dd/MM/yyyy HH:mm"/> 
 
\t \t \t 
 
\t \t \t    <p:outputLabel for="allDay" value="All Day:" /> 
 
\t \t \t    <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" /> 
 
\t \t \t 
 
\t \t \t    <p:commandButton type="reset" value="Reset" /> 
 
\t \t \t    <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addNewEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" /> 
 
\t \t \t   </h:panelGrid> 
 
\t \t \t  </p:dialog> 
 
\t \t \t </center> 
 
\t \t </h:form> 
 
\t </h:body> 
 
\t <p:graphicImage value="/resources/icons/Footer.png" style="text-align:center"/> 
 
</html>

HTH。

+0

谢谢@saria很多帮助。它也可以工作。 – Jolia

+0

不客气。 – saria

0

你可以ScheduleView.java指定事件的风格:

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

,并把你的风格HTML主页上:

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