<style type="text/css">
/* Custom styles for the Timeline */
div.timeline-frame {
border-color: #5D99C3;
border-radius: 5px;
}
div.timeline-axis {
border-color: #5D99C3;
background-color: #5D99C3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0') alpha(opacity = 100);
background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0));
background: -moz-linear-gradient(top, #5D99C3, #3A6DA0);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
div.timeline-groups-axis {
border-color: #5D99C3;
}
div.timeline-groups-axis-onleft {
border-style: none solid none none;
}
div.timeline-axis-text {
color: white;
}
div.timeline-event {
color: white !important;
border-radius: 5px !important;
}
div.timeline-event-content {
padding: 5px;
text-shadow: none;
}
div.unavailable {
background: #F03030 none !important; /* red */
border-color: #bd2828 !important; /* red */
}
div.available {
background: #1AA11A none !important; /* green */
border-color: #136e13 !important; /* green */
}
div.maybe {
background: #FFA500 none !important; /* orange */
border-color: #cc8100 !important; /* orange */
}
div.timeline-event-selected {
background: #BECEFE none !important;
border-color: #97B0F8 !important;
}
</style>
<p:growl id="growl" showSummary="true" showDetail="true" keepAlive="true" life="3000">
<p:autoUpdate />
</p:growl>
<p:timeline id="timeline" value="#{allEventsTimelineView.model}"
editable="true" eventMargin="10" eventMarginAxis="0"
start="#{allEventsTimelineView.start}"
end="#{allEventsTimelineView.end}"
axisOnTop="true" stackEvents="false">
<p:ajax event="add" listener="#{allEventsTimelineView.onAdd}"/>
<p:ajax event="changed" listener="#{allEventsTimelineView.onChanged}"/>
<p:ajax event="edit" listener="#{allEventsTimelineView.onEdit}"/>
<p:ajax event="delete" listener="#{allEventsTimelineView.onDelete}"/>
<p:ajax event="select" listener="#{allEventsTimelineView.onSelect}"/>
<p:ajax event="rangechanged" listener="#{allEventsTimelineView.onRangeChanged}"/>
<p:ajax event="lazyload" listener="#{allEventsTimelineView.onLazyLoad}"/>
<p:ajax event="drop" listener="#{allEventsTimelineView.onDrop}"/>
</p:timeline>
@Named("allEventsTimelineView")
@ViewScoped
public class AllEventsTimelineView implements Serializable {
private TimelineModel<String, ?> model;
private LocalDateTime start;
private LocalDateTime end;
private static final DateTimeFormatter formatter = DateTimeFormatter.ISO_LOCAL_DATE_TIME;
@PostConstruct
public void init() {
// set initial start / end dates for the axis of the timeline
start = LocalDateTime.now().minusHours(4);
end = LocalDateTime.now().plusHours(8);
// groups
String[] NAMES = new String[] {"User 1", "User 2", "User 3", "User 4", "User 5", "User 6"};
// create timeline model
model = new TimelineModel<>();
for (String name : NAMES) {
LocalDateTime end = LocalDateTime.now().minusHours(12).withMinute(0).withSecond(0).withNano(0);
for (int i = 0; i < 5; i++) {
LocalDateTime start = end.plusHours(Math.round(Math.random() *5));
end = start.plusHours(4 + Math.round(Math.random() *5));
long r = Math.round(Math.random() * 2);
String availability = (r == 0 ? "Unavailable" : (r == 1 ? "Available" : "Maybe"));
// create an event with content, start / end dates, editable flag, group name and custom style class
TimelineEvent event = TimelineEvent.builder()
.data(availability)
.startDate(start)
.endDate(end)
.editable(true)
.group(name)
.styleClass(availability.toLowerCase())
.build();
model.add(event);
}
}
}
public void onAdd(TimelineAddEvent e) {
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "add", e.getStartDate().format(formatter) + " - " + e.getEndDate().format(formatter)));
}
public void onChange(TimelineModificationEvent<String> e) {
TimelineEvent<String> timelineEvent = e.getTimelineEvent();
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "change", timelineEvent.getData() + ": " + timelineEvent.getStartDate().format(formatter) + " - " + timelineEvent.getEndDate().format(formatter)));
}
public void onChanged(TimelineModificationEvent<String> e) {
TimelineEvent<String> timelineEvent = e.getTimelineEvent();
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "changed", timelineEvent.getData() + ": " + timelineEvent.getStartDate().format(formatter) + " - " + timelineEvent.getEndDate().format(formatter)));
}
public void onEdit(TimelineModificationEvent<String> e) {
TimelineEvent<String> timelineEvent = e.getTimelineEvent();
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "edit", timelineEvent.getData() + ": " + timelineEvent.getStartDate().format(formatter) + " - " + timelineEvent.getEndDate().format(formatter)));
}
public void onDelete(TimelineModificationEvent<String> e) {
TimelineEvent<String> timelineEvent = e.getTimelineEvent();
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "delete", timelineEvent.getData() + ": " + timelineEvent.getStartDate().format(formatter) + " - " + timelineEvent.getEndDate().format(formatter)));
}
public void onSelect(TimelineSelectEvent<String> e) {
TimelineEvent<String> timelineEvent = e.getTimelineEvent();
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "select", timelineEvent.getData() + ": " + timelineEvent.getStartDate().format(formatter) + " - " + timelineEvent.getEndDate().format(formatter)));
}
public void onRangeChange(TimelineRangeEvent e) {
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "rangechange", e.getStartDate().format(formatter) + " - " + e.getEndDate().format(formatter)));
}
public void onRangeChanged(TimelineRangeEvent e) {
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "rangechanged", e.getStartDate().format(formatter) + " - " + e.getEndDate().format(formatter)));
}
public void onLazyLoad(TimelineLazyLoadEvent e) {
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "lazyload", e.getStartDate().format(formatter) + " - " + e.getEndDate().format(formatter)));
}
public void onDrop(TimelineDragDropEvent<Event> e) {
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "drop", e.getData().getStart().format(formatter) + " - " + e.getData().getEnd().format(formatter)));
}
public TimelineModel<String, ?> getModel() {
return model;
}
public LocalDateTime getStart() {
return start;
}
public LocalDateTime getEnd() {
return end;
}
} 
