Primefaces Schedule Event Color Is Not Working After Replacing Primefaces Jar 3.3 by 4.0

Color of Event on p:schedule /

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>

Change color of primefaces schedule event for current date

.fc-today  /* today */
{
background-image: linear-gradient(to bottom, #44565F, #0077b3) !important;
}

I had the same problem. I have tested this on chrome and its working. Change the colors as per your choice

Change the color of primefaces Scheduler Event

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.

How to get the event when prev,next are clicked : Schedule with primefaces

To capture dates / view changes on the server / in your bean, I found it easiest to just go for lazy loading (showcase, documentation). This will basically allow you to have a method in the bean where the start and end date are passed in case the view changes:

lazyModel = new LazyScheduleModel() {
@Override
public void loadEvents(LocalDateTime start, LocalDateTime end) {
//
}
};

.. and as a bonus, your events will be lazily loaded!

Note that the type of dates (java.time.LocalDateTime or java.util.Date) will depend on the PrimeFaces version. See the migration guide.

To modify the UI, you need to know that PrimeFaces is using FullCalendar for the p:schedule component. You can use the extender attribute and configure the FullCalendar to your needs. See the toolbar documentation. Note that the version of FullCalendar will depend on the PrimeFaces version. Again, see the migration guide.

To set the time format, use the timeFormat attribute. It uses Moment.js. You could use hh:mmA. Try it on https://www.primefaces.org/showcase/ui/data/schedule/configureable.xhtml

Primefaces prevent/disable editing in schedule

1) DRAGGING: Use the draggable attribute of <p:schedule> set it to false or bind it to a bean property.

2) Editting: remove the listener from the eventSelect.

<p:schedule value="#{scheduleController.eventModel}" draggable="false" widgetVar="myschedule">
<p:ajax event="dateSelect" listener="#{scheduleController.onDateSelect}" oncomplete="eventDialog.show()" />
<!-- <p:ajax event="eventSelect" listener="NOBODY" update="NOTHING" Oncomplete="REMOVE ME" /> -->
<p:ajax event="eventMove" listener="#{scheduleController.onEventMove}" update="formNotificacao" />
<p:ajax event="eventResize" listener="#{scheduleController.onEventResize}" update="formNotificacao" />
</p:schedule>

PS: you did not specify PF version, i am using 3.3.1

PS2: if you leave the commented line your JSF may throw an error www.mkyong.com/jsf2/how-to-use-comments-in-jsf-2-0/



Related Topics



Leave a reply



Submit