Homepage
Timeline
The Timeline is an interactive visualization chart to visualize events in time. The time scale on the axis is adjusted automatically and supports scales ranging from milliseconds to years. Timeline events can take place on a single date, or have a start and end date (a range). You can freely move and zoom in the timeline by dragging and scrolling in the timeline component.

Events in the timeline can be created, edited, and deleted when the timeline is defined as editable.
  • Events can be moved to another time by dragging them.
  • When an event with a date range is selected, it has a drag area on the left and right side, with which the start or end dates of the event can be manipulated.
  • By double clicking, the contents of an event can be changed.
  • An event can be deleted by clicking the delete button on the upper right.
  • A new event can be added in different ways: by double clicking in the timeline, or by keeping the Ctrl key down and clicking or dragging in the timeline, or by clicking the "Add" button in the timeline.
Timeline has features such as editable and read-only events, event's grouping, configurable zoom range, min. / max. dates for visible range, client-side and server-side API, i18n support, lazy loading, drag-and-drop and more. Explore various timeline features yourself!
Components and more
Documentation pe:timeline
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
style Inline style of the component
styleClass Container style class
widgetVar Name of the client side widget.
value An instance of TimelineModel representing the backing model.
var Name of the request-scoped variable for underlaying object in the TimelineEvent for each iteration.
varGroup Name of the request-scoped variable for underlaying object in the TimelineGroup for each iteration.
locale User locale for i18n messages. The attribute can be either a String or Locale object.
timeZone Target time zone to convert start / end dates for displaying. This time zone is the time zone the user would like to see dates in UI. The attribute can be either a String or TimeZone object or null. If null, timeZone defaults to the server's time zone the application is running in.
browserTimeZone Time zone the user's browser / PC is running in. This time zone allows to correct the conversion of start / end dates to the target timeZone for displaying. The attribute can be either a String or TimeZone object or null. Note: browserTimeZone should be provided if the target timeZone is provided. If null, browserTimeZone defaults to the server's timeZone.
height The height of the timeline in pixels, as a percentage, or "auto". When the height is set to "auto", the height of the timeline is automatically adjusted to fit the contents. If not, it is possible that events get stacked so high, that they are not visible in the timeline. When height is set to "auto", a minimum height can be specified with the option minHeight. Default is "auto".
minHeight Specifies a minimum height for the Timeline in pixels. Useful when height is set to "auto". Default is 0.
width The width of the timeline in pixels or as a percentage. Default is "100%".
responsive Check if the timeline container is resized, and if so, resize the timeline. Useful when the webpage (browser window) or a layout pane / unit containing the timeline component is resized. Default is true.
axisOnTop If false, the horizontal axis is drawn at the bottom. If true, the axis is drawn on top. Default is false.
dragAreaWidth The width of the drag areas in pixels. When an event with date range is selected, it has a drag area on the left and right side, with which the start or end dates of the event can be manipulated. Default is 10.
editable If true, the events can be edited, changed, created and deleted. Events can only be editable when the option selectable is true (default). When editable is true, the timeline can fire AJAX events "change", "edit", "add", "delete", "drop". This global setting "editable" can be overwritten for individual events by setting a value in field "editable". Default is false.
selectable If true, events on the timeline are selectable. Selectable events can fire AJAX "select" events. Default is true.
unselectable If true, you can unselect an item by clicking in the empty space of the timeline. If false, you cannot unselect an item, there will be always one item selected. Default is true.
zoomable If true, the timeline is zoomable. When the timeline is zoomed, AJAX "rangechange" events are fired. Default is true.
moveable If true, the timeline is movable. When the timeline is moved, AJAX "rangechange" events are fired. Default is true.
start The initial start date for the axis of the timeline. If not provided, the earliest date present in the events is taken as start date. Default is null.
end The initial end date for the axis of the timeline. If not provided, the latest date present in the events is taken as end date. Default is null.
min Set a minimum Date for the visible range. It will not be possible to move beyond this minimum. Default is null.
max Set a maximum Date for the visible range. It will not be possible to move beyond this maximum. Default is null.
zoomMin Set a minimum zoom interval for the visible range in milliseconds. It will not be possible to zoom in further than this minimum. Default is 10.
zoomMax Set a maximum zoom interval for the visible range in milliseconds. It will not be possible to zoom out further than this maximum. Default value equals 315360000000000 ms (about 10000 years).
preloadFactor Preload factor is a positive float value or 0 which can be used for lazy loading of events. When the lazy loading feature is active, the calculated time range for preloading will be multiplicated by the preload factor. The result of this multiplication specifies the additional time range which will be considered for the preloading during moving / zooming too. For example, if the calculated time range for preloading is 5 days and the preload factor is 0.2, the result is 5 * 0.2 = 1 day. That means, 1 day backwards and / or 1 day onwards will be added to the original calculated time range. The event's area to be preloaded is wider then. This helps to avoid frequently, time-consuming fetching of events. Default value is 0.
eventMargin The minimal margin in pixels between events. Default is 10.
eventMarginAxis The minimal margin in pixels between events and the horizontal axis. Default is 10.
eventStyle Specifies the style for the timeline events. Choose from "dot" or "box". Default is "box".
groupsChangeable If true, items can be moved from one group to another. Only applicable when groups are used. Default is true.
groupsOnRight If false, the groups legend is drawn at the left side of the timeline. If true, the groups legend is drawn on the right side. Default is false.
groupsOrder Allows to customize the way groups are ordered. When true (default), groups will be ordered by content alphabetically (when the list of groups is missing) or by native ordering of TimelineGroup object in the list of groups (when the list of groups is available). When false, groups will not be ordered at all.
groupsWidth By default, the width of the groups legend is adjusted to the group names. A fixed width can be set for the groups legend by specifying the "groupsWidth" as a string, for example "200px". Default is null.
groupMinHeight The minimum height of each individual group even if they have no items. The group height is set as the greatest value between items height and the groupMinHeight. Default is 0.
snapEvents If true, the start and end of an event will be snapped nice integer values when moving or resizing the event. Default is true.
stackEvents If true, the events are stacked above each other to prevent overlapping events. Default is true.
showCurrentTime If true, the timeline shows a red, vertical line displaying the current time. Default is true.
showMajorLabels By default, the timeline shows both minor and major date labels on the horizontal axis. For example the minor labels show minutes and the major labels show hours. When "showMajorLabels" is false, no major labels are shown. Default is true.
showMinorLabels By default, the timeline shows both minor and major date labels on the horizontal axis. For example the minor labels show minutes and the major labels show hours. When "showMinorLabels" is false, no minor labels are shown. When both "showMajorLabels" and "showMinorLabels" are false, no horizontal axis will be visible. Default is true.
showButtonNew Show the button "Create new event" in the a navigation menu. Default is false.
showNavigation Show a navigation menu with buttons to move and zoom the timeline. Default is false.
timeChangeable If false, items can not be moved or dragged horizontally (neither start time nor end time is changable). This is useful when items should be editable but can only be changed regarding group or content (typical use case: scheduling events). Default is true.
dropHoverStyleClass Style class to apply when an acceptable draggable is dragged over. Default is null.
dropActiveStyleClass Style class to apply when an acceptable draggable is being dragged over. Default is null.
dropAccept Selector to define the accepted draggables. Default is null.
dropScope Scope key to match draggables and droppables. Default is null.
animate When true, events are moved animated when resizing or moving them. This is very pleasing for the eye, but does require more computational power. Default is true.
animateZoom When true, events are moved animated when zooming the Timeline. This looks cool, but does require more computational power. Default is true.
Events (move mouse over the names to see classes)
Name Description
addfired when event is about the be added
changefired repeatedly while the user is modifying the start date or end date of an event by moving / dragging the event in the Timeline.
changedfired after the user modified the start date or end date of an event by moving / dragging the event in the timeline
editfired when event is about to be edited. This event is fired when the user double clicks on an event
deletefired when event is about to be deleted. That means the user clicked on the "delete event" button on the right of an event
selectfired when the user clicks on an event
rangechangefired when the visible range is changing. Fired repeatedly while the user is modifying the visible time by moving / dragging the timeline or by zooming / scrolling
rangechangedfired when the visible range has been changed. Fired once after the user has modified the visible time by moving / dragging the timeline or by zooming / scrolling
lazyloadfired when the events should be lazy loaded. Fired once after the user has modified the visible time by moving / dragging the timeline or by zooming / scrolling
dropfired when when an item is dragged and dropped onto the Timeline from outside
PrimeFaces Extensions Showcase - © 2011-2014, PrimeFaces: 5.2, PrimeFaces Extensions: 4.0.0-SNAPSHOT, JSF: mojarra 2.2.8, Server: Apache Tomcat/7.0.54, Build time: 2015-08-22 09:03
Theme
afterdark
afternoon
afterwork
aristo
black-tie
blitzer
bluesky
bootstrap
casablanca
cruze
cupertino
dark-hive
delta
dot-luv
eggplant
excite-bike
flick
glass-x
home
hot-sneaks
humanity
le-frog
midnight
mint-choc
overcast
pepper-grinder
redmond
rocket
sam
smoothness
south-street
start
sunny
swanky-purse
trontastic
ui-darkness
ui-lightness
vader
occured!
Message:
Timestamp:
StackTrace:
Developers
Thomas Andraschko andraschko.thomas@gmail.com
Oleg Varaksin ovaraksin@googlemail.com
Nilesh Namdeo Mali nileshmali86@gmail.com
Mauricio Fenoglio fenoglio.mauricio@gmail.com
Pavol Slaný pavol.slany@gmail.com
Sudheer Jonna sudheer.jonna@gmail.com