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
Google Chrome Bug - Overflow:Auto | Scroll Doesn't Work
Cannot Stretch Svg Background Image, Aspect Ratio Will Be Preserved
Cant Edit CSS Style Properties (Grayed Out & Blocked) in Chrome
How to See All Edited Styles in Firefox Developer Tools
Detect Screen Width with CSS Media Queries
CSS Background to Stretch to Window Bottom
Single-Line Vs Multi-Line CSS Formatting
Internet Explorer 8 and Checkbox CSS Problem
Ie9 + CSS: Problem with Fixed Header Table
What Actually Happens to CSS in High Contrast Mode
Universal CSS Selector to Match Any and All HTML Data-* Attributes
How to Style Inner Elements of Custom Polymer Element Using External Styles
My Less Math Operations Aren't Working in My Media Query Definitions