<a:timeline id="timeline" value="#{customTimelineView.model}" editable="true" eventMargin="10" eventMarginAxis="0" start="#{customTimelineView.start}" end="#{customTimelineView.end}" showNavigation="true" showButtonNew="true" axisOnTop="true" stackEvents="false"/> <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>
import java.io.Serializable; import java.util.Calendar; import java.util.Date; import java.util.TimeZone; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import org.primefaces.model.timeline.TimelineEvent; import org.primefaces.model.timeline.TimelineModel; @ManagedBean(name = "customTimelineView") @ViewScoped public class CustomTimelineView implements Serializable { private TimelineModel model; private Date start; private Date end; @PostConstruct public void init() { // set initial start / end dates for the axis of the timeline Calendar cal = Calendar.getInstance(TimeZone.getTimeZone("UTC")); Date now = new Date(); cal.setTimeInMillis(now.getTime() - 4 * 60 * 60 * 1000); start = cal.getTime(); cal.setTimeInMillis(now.getTime() + 8 * 60 * 60 * 1000); end = cal.getTime(); // 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) { now = new Date(); Date end = new Date(now.getTime() - 12 * 60 * 60 * 1000); for (int i = 0; i < 5; i++) { Date start = new Date(end.getTime() + Math.round(Math.random() * 5) * 60 * 60 * 1000); end = new Date(start.getTime() + Math.round(4 + Math.random() * 5) * 60 * 60 * 1000); 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 = new TimelineEvent(availability, start, end, true, name, availability.toLowerCase()); model.add(event); } } } public TimelineModel getModel() { return model; } public Date getStart() { return start; } public Date getEnd() { return end; } }