• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources
Theme
Theme
Preset primefaces.THEME
Apple Liquid Glass style: translucent overlays, menus and bars that blur the page behind them, capsule buttons.
Color scheme color-scheme
Input style p-input-filled
Density data-p-density
Direction primefaces.DIR
Colors
Primary --p-primary-base
Surface --p-surface-*
Shape and motion
Button shape --p-button-border-radius
Shadows --p-*-shadow
Animations --p-transition-duration
Ripple --p-ripple-opacity
Border radius --p-border-radius-*
Typography
Focus ring
Form field
CSS
Only the tokens that differ from the preset.

                        
                    

Timeline Nested Grouping and events

This example demonstrate nested groups that are 3 levels deep.

Timeline Tag Documentation

Timeline is an interactive visualization chart to visualize events in time.

NameTypeRequiredDefaultDescription
snap String false When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The snap function can be replaced with a custom javascript function, or can be set to null to disable snapping. The signature of the snap function is: function snap(date: Date, scale: string, step: number) : Date or number. The parameter scale can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'week', 'day, 'month, or 'year'. The parameter step is a number like 1, 2, 4, 5.
clickToUse boolean false false When a Timeline is configured to be clickToUse, it will react to mouse and touch events only when active. When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.
locale Object false View Locale. User locale for i18n localization messages. The attribute can be either a String or java.util.Locale object.
id String false generated Unique identifier of the component in a namingContainer.
clientTimeZone Object false Browser's time zone. Time zone the user would like to see dates in UI. The attribute can be either a String or TimeZone object or null.
width String false 100% The width of the timeline in pixels or as a percentage.
eventVerticalMargin int false getEventMargin() The minimal vertical margin in pixels between items. Takes precedence over eventMargin property.
eventMarginAxis int false 10 The minimal margin in pixels between events and the horizontal axis.
eventMargin int false 10 The minimal margin in pixels between events.
eventHorizontalMargin int false getEventMargin() The minimal horizontal margin in pixels between items. Takes precedence over eventMargin property.
start LocalDateTime false 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.
end LocalDateTime false 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.
height String false The height of the timeline in pixels or as a percentage. When height is undefined or null, the height of the timeline is automatically adjusted to fit the contents. It is possible to set a maximum height using option maxHeight to prevent the timeline from getting too high in case of automatically calculated height.
timeZone Object false Server's time zone. Target time zone to convert start / end dates of TimelineEvent's in server side. The attribute can be either a String, TimeZone object or null.
dropHoverStyleClass String false Style class to apply when an acceptable draggable is dragged over.
dropActiveStyleClass String false Style class to apply when an acceptable draggable is being dragged over.
styleClass String false Style class of the component.
zoomKey String false Specifies whether the Timeline is only zoomed when an additional key is down. Available values are '' (does not apply), 'altKey', 'ctrlKey', 'shiftKey' or 'metaKey'. Only applicable when option moveable is set true.
verticalScroll boolean false false Specifies the vertical scrollable.
maxHeight Integer false Specifies the maximum height for the Timeline in pixels.
horizontalScroll boolean false false Specifies the horizontal scrollable.
eventStyle String false Specifies the default type for the timeline items. Choose from 'box', 'point' and 'range'. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
minHeight Integer false Specifies a minimum height for the Timeline in pixels.
tooltipOverflowMethod String false flip Set how the tooltip should act if it is about to overflow out of the timeline. Choose from 'cap', 'flip' and 'none'. If it is set to 'cap', the tooltip will just cap its position to inside to timeline. If set to 'flip', the position of the tooltip will flip around the cursor so that a corner is at the cursor, and the rest of it is visible. If set to 'none', the tooltip will be positioned independently of the timeline, so parts of the tooltip could possibly be hidden or stick ouf of the timeline, depending how CSS overflow is defined for the timeline (by default it's hidden).
tooltipDelay int false 500 Set a value (in ms) that the tooltip is delayed before showing.
zoomMin Long false 10L Set a minimum zoom interval for the visible range in milliseconds. It will not be possible to zoom in further than this minimum.
min LocalDateTime false Set a minimum Date for the visible range. It will not be possible to move beyond this minimum.
zoomMax Long false 315360000000000L 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).
max LocalDateTime false Set a maximum Date for the visible range. It will not be possible to move beyond this maximum.
dropAccept String false Selector to define the accepted draggables.
dropScope String false Scope key to match draggables and droppables.
preloadFactor Float false 0.0f 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.
orientationItem String false bottom Orientation of the timeline items: 'top' or 'bottom'. Determines whether items are aligned to the top or bottom of the Timeline.
orientationAxis String false bottom Orientation of the timeline axis: 'top', 'bottom', 'both', or 'none'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom. In case of 'none', no axis is drawn at all.
varGroup String false Name of the request-scoped variable for underlaying object in the TimelineGroup for each iteration.
var String false Name of the request-scoped variable for underlaying object in the TimelineEvent for each iteration.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
extender String false Name of javascript function to extend the options of the underlying timeline javascript component.
style String false Inline style of the component.
tooltipFollowMouse boolean false false If true, tooltips will follow the mouse as they move around in the item.
editableOverrideItems boolean false false If true, TimelineEvent specific editables properties are overridden by timeline settings.
showCurrentTime boolean false true If true, the timeline shows a red, vertical line displaying the current time.
zoomable boolean false true If true, the timeline is zoomable. When the timeline is zoomed, AJAX "rangechange" events are fired.
moveable boolean false true If true, the timeline is movable. When the timeline is moved, AJAX "rangechange" events are fired.
editable boolean false false If true, the items in the timeline can be manipulated. Only applicable when option selectable is true.
stackEvents boolean false true If true, the events are stacked above each other to prevent overlapping events.
editableAdd boolean false isEditable() If true, new items can be created by double tapping an empty space in the Timeline. Takes precedence over editable.
showTooltips boolean false true If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing.
editableTime boolean false isEditable() If true, items can be dragged to another moment in time. Takes precedence over editable.
editableGroup boolean false isEditable() If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. Takes precedence over editable.
editableRemove boolean false isEditable() If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. Takes precedence over editable.
selectable boolean false true If true, events on the timeline are selectable. Selectable events can fire AJAX "select" events.
dir String false ltr Defines text direction, valid values are ltr and rtl.
responsive boolean false true 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.
showNested boolean false true By default, the timeline shows nested groups without collapsed. When "showNested" is false, all nested groups shown as collapsed. If "showNested" is set different in TimelineGroup model, it will override this.
showMinorLabels boolean false true 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.
showMajorLabels boolean false true 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.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
value TimelineModel true An instance of TimelineModel representing the backing model.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
groupsOrder boolean false true 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.
groupStyle String false A css text string to apply custom styling for an individual group label, for example "color: red; background-color: pink;".
Loading...
Tag Documentation Documentation Documentation JSDoc Basic Limit Range Custom DragDrop Linked Timelines All Events Grouping Nested Grouping Editable Server-Side Lazy Loading

Usage


<style>
    div.vis-item-content {
        padding: 4px;
        border-radius: 2px;
        -moz-border-radius: 2px;
    }

    div.vis-item.vis-item-range {
        border-width: 0;
    }

    #overlappedOrders {
        margin-top: 20px;
        width: 100%;
    }

    #overlappedOrders .p-chkbox {
        vertical-align: middle;
        margin: 3px 5px;
    }
</style>

<div class="card">
    <h:form id="form">
        <p:growl id="growl" showSummary="true" showDetail="false">
            <p:autoUpdate/>
        </p:growl>

        <p:timeline id="timeline" value="#{nestedGroupingTimelineView.model}" var="order" varGroup="truck"
                    editable="true" eventMargin="0" eventMarginAxis="0" stackEvents="false"
                    orientationAxis="top" widgetVar="timelineWdgt">
            <p:ajax event="changed" update="@none" listener="#{nestedGroupingTimelineView.onChange}"/>
            <p:ajax event="delete" update="@none" listener="#{nestedGroupingTimelineView.onDelete}"/>
            <p:ajax event="add" update="@none" onstart="PF('timelineWdgt').cancelAdd()"/>

            <f:facet name="group">
                <h:graphicImage library="demo" name="images/timeline/truck.png" style="vertical-align:middle;"
                                alt="Truck"/>
                <h:outputText value="#{truck}" style="font-weight:bold;"/>
            </f:facet>

            <h:graphicImage library="demo" name="#{order.imagePath}" rendered="#{not empty order.imagePath}"
                            style="display:inline; vertical-align:middle;" alt="Order"/>
            <h:outputText value="Order #{order.number}"/>
        </p:timeline>

        <!-- Dialog with overlapped timeline events -->
        <p:dialog id="overlapEventsDlg" header="Overlapped Orders" widgetVar="overlapEventsWdgt"
                  showEffect="clip" hideEffect="clip">
            <h:panelGroup id="overlappedOrdersInner" layout="block" style="padding:10px;">
                <strong>
                    Please choose Orders you want to merge with the Order #{nestedGroupingTimelineView.selectedOrder}
                </strong>

                <p/>

                <p:selectManyMenu id="overlappedOrders" value="#{nestedGroupingTimelineView.ordersToMerge}"
                                  showCheckbox="true">
                    <f:selectItems value="#{nestedGroupingTimelineView.overlappedOrders}" var="order"
                                   itemLabel=" Order #{order.data.number}" itemValue="#{order}"/>
                    <sc:convertOrder events="#{nestedGroupingTimelineView.model.events}"/>
                </p:selectManyMenu>
            </h:panelGroup>

            <f:facet name="footer">
                <h:panelGroup layout="block" style="text-align:right; padding:2px; white-space:nowrap;">
                    <p:commandButton value="Merge" process="overlapEventsDlg" update="@none"
                                     action="#{nestedGroupingTimelineView.merge}"
                                     oncomplete="PF('overlapEventsWdgt').hide()"/>
                    <p:commandButton type="button" value="Close" onclick="PF('overlapEventsWdgt').hide()"/>
                </h:panelGroup>
            </f:facet>
        </p:dialog>
    </h:form>
</div>