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

Input Style

Themes

PrimeUIX
Aura Light Emerald Aura Light Emerald
Aura Dark Emerald Aura Dark Emerald
PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

Timeline DragDrop

Drag events from the list on the left side and drop them onto the timeline.

Timeline Tag Documentation

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

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
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.
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.
dir String false ltr Defines text direction, valid values are ltr and rtl.
dropAccept String false Selector to define the accepted draggables.
dropActiveStyleClass String false Style class to apply when an acceptable draggable is being dragged over.
dropHoverStyleClass String false Style class to apply when an acceptable draggable is dragged over.
dropScope String false Scope key to match draggables and droppables.
editable boolean false false If true, the items in the timeline can be manipulated. Only applicable when option selectable is true.
editableAdd boolean false isEditable() If true, new items can be created by double tapping an empty space in the Timeline. 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.
editableOverrideItems boolean false false If true, TimelineEvent specific editables properties are overridden by timeline settings.
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.
editableTime boolean false isEditable() If true, items can be dragged to another moment in time. Takes precedence over editable.
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.
eventHorizontalMargin int false getEventMargin() The minimal horizontal margin in pixels between items. Takes precedence over eventMargin property.
eventMargin int false 10 The minimal margin in pixels between events.
eventMarginAxis int false 10 The minimal margin in pixels between events and the horizontal axis.
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.
eventVerticalMargin int false getEventMargin() The minimal vertical margin in pixels between items. Takes precedence over eventMargin property.
extender String false Name of javascript function to extend the options of the underlying timeline javascript component.
groupStyle String false A css text string to apply custom styling for an individual group label, for example "color: red; background-color: pink;".
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.
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.
horizontalScroll boolean false false Specifies the horizontal scrollable.
locale Object false View Locale. User locale for i18n localization messages. The attribute can be either a String or java.util.Locale object.
max LocalDateTime false Set a maximum Date for the visible range. It will not be possible to move beyond this maximum.
maxHeight Integer false Specifies the maximum height for the Timeline in pixels.
min LocalDateTime false Set a minimum Date for the visible range. It will not be possible to move beyond this minimum.
minHeight Integer false Specifies a minimum height for the Timeline in pixels.
moveable boolean false true If true, the timeline is movable. When the timeline is moved, AJAX "rangechange" events are fired.
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.
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.
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.
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.
selectable boolean false true If true, events on the timeline are selectable. Selectable events can fire AJAX "select" events.
showCurrentTime boolean false true If true, the timeline shows a red, vertical line displaying the current time.
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.
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.
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.
showTooltips boolean false true If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing.
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.
stackEvents boolean false true If true, the events are stacked above each other to prevent overlapping events.
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.
style String false Inline style of the component.
styleClass String false Style class of the component.
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.
tooltipDelay int false 500 Set a value (in ms) that the tooltip is delayed before showing.
tooltipFollowMouse boolean false false If true, tooltips will follow the mouse as they move around in the item.
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).
value TimelineModel true An instance of TimelineModel representing the backing model.
var String false Name of the request-scoped variable for underlaying object in the TimelineEvent for each iteration.
varGroup String false Name of the request-scoped variable for underlaying object in the TimelineGroup for each iteration.
verticalScroll boolean false false Specifies the vertical scrollable.
width String false 100% The width of the timeline in pixels or as a percentage.
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.
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).
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.
zoomable boolean false true If true, the timeline is zoomable. When the timeline is zoomed, AJAX "rangechange" events are fired.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc Basic Limit Range Custom DragDrop Linked Timelines All Events Grouping Nested Grouping Editable Server-Side Lazy Loading
  • Event 1
  • Event 2
  • Event 3
  • Event 4
  • Event 5
  • Event 6
  • Event 7
  • Event 8
  • Event 9
  • Event 10

Usage


<style>
    .ui-datalist-item .ui-draggable:hover {
        background: var(--surface-c);
    }
    
    .ui-datalist-data {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ui-datalist-item {
        margin-bottom: .5rem;
        width: 100%;
    }
</style>


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

        <div style="float: left; width: 130px;">
            <p:dataList id="eventsList" value="#{dndTimelineView.events}" var="event" itemType="circle">
                <p:outputPanel id="eventBox" style="z-index:9999; cursor:move;" styleClass="p-2">
                    #{event.name}
                </p:outputPanel>

                <p:draggable for="eventBox" revert="true" helper="clone" cursor="move"/>
            </p:dataList>
        </div>

        <p:timeline id="timeline" value="#{dndTimelineView.model}" var="event" editable="true" eventMargin="10"
            eventMarginAxis="0" minHeight="400" start="#{dndTimelineView.start}" end="#{dndTimelineView.end}"
            style="margin-left:135px;" dropActiveStyleClass="ui-state-highlight"
            dropHoverStyleClass="ui-state-hover">
            <p:ajax event="drop" listener="#{dndTimelineView.onDrop}" global="false" update="eventsList" />

            <h:panelGrid columns="1">
                <h:outputText value="#{event.name}" />
                <h:outputText value="#{event.start}">
                    <f:convertDateTime type="localDateTime" pattern="hh:mm:ss a" />
                </h:outputText>
                <h:outputText value="#{event.end}">
                    <f:convertDateTime type="localDateTime" pattern="hh:mm:ss a" />
                </h:outputText>
            </h:panelGrid>
        </p:timeline>
    </h:form>
</div>