Timeline - Custom
This example demonstrates timeline's customization (custom styles) along with i18n text.
Documentation
<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:timeline id="timeline" value="#{customTimelineView.model}"
editable="true" eventMargin="10" eventMarginAxis="0"
start="#{customTimelineView.start}"
end="#{customTimelineView.end}"
axisOnTop="true" stackEvents="false" widgetVar="timelineWdgt">
<f:facet name="menu">
<p:commandButton type="button" icon="pi pi-chevron-left" onclick="PF('timelineWdgt').move(-0.3);" />
<p:commandButton type="button" icon="pi pi-chevron-right" onclick="PF('timelineWdgt').move(0.3);" />
<p:commandButton type="button" icon="pi pi-search-minus" onclick="PF('timelineWdgt').zoom(-0.5);" />
<p:commandButton type="button" icon="pi pi-search-plus" onclick="PF('timelineWdgt').zoom(0.5);" />
</f:facet>
<f:facet name="loading">
<i class="pi pi-spin pi-spinner" style="font-size: 3em"></i>
</f:facet>
</p:timeline>
@Named("customTimelineView")
@ViewScoped
public class CustomTimelineView implements Serializable {
private TimelineModel<String, ?> model;
private LocalDateTime start;
private LocalDateTime end;
@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 TimelineModel<String, ?> getModel() {
return model;
}
public LocalDateTime getStart() {
return start;
}
public LocalDateTime getEnd() {
return end;
}
}
