	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

Timeline Custom

This example demonstrates timeline's customization (custom styles) along with i18n text.

Timeline Tag Documentation

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

Name	Type	Required	Default	Description
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 component.
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.

Name	Description
eventTitle	Event title content of the timeline.
group	Group content of the timeline.
loading	Loading content of the timeline.
menu	Menu content of the timeline.

Name	Type	Default	Description
add	TimelineAddEvent	false	Fired when a new item is added to the timeline.
change	TimelineModificationEvent	false	Fired when an item is being modified.
changed	TimelineModificationEvent	false	Fired when an item has been modified.
edit	TimelineModificationEvent	false	Fired when an item is being edited.
delete	TimelineModificationEvent	false	Fired when an item is deleted.
select	TimelineSelectEvent	true	Fired when an item is selected on the timeline.
rangechange	TimelineRangeEvent	false	Fired when the visible range is changing.
rangechanged	TimelineRangeEvent	false	Fired when the visible range has been changed.
lazyload	TimelineLazyLoadEvent	false	Fired when lazy loading is triggered to fetch events.
drop	TimelineDragDropEvent	false	Fired when a draggable item is dropped onto the timeline.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces
moment/moment.js	primefaces
timeline/timeline.css	primefaces
timeline/timeline.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.Timeline

Class org.primefaces.component.timeline.Timeline

Renderer Type org.primefaces.component.TimelineRenderer

Renderer Class org.primefaces.component.timeline.TimelineRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

ON THIS PAGE

Basic Limit Range Custom DragDrop Linked Timelines All Events Grouping Nested Grouping Editable Server-Side Lazy Loading


<style>
    /* 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>

<h:form id="form">
    <div class="card">
        <p:timeline id="timeline" value="#{customTimelineView.model}"
            editable="true" eventMargin="10" eventMarginAxis="0"
            start="#{customTimelineView.start}" end="#{customTimelineView.end}"
            stackEvents="false" widgetVar="timelineWdgt">
            <f:facet name="menu">
                <p:commandButton type="button" icon="pi pi-chevron-left" styleClass="ml-2" onclick="PF('timelineWdgt').move(-0.3);" />
                <p:commandButton type="button" icon="pi pi-chevron-right" styleClass="ml-2" onclick="PF('timelineWdgt').move(0.3);" />
                <p:commandButton type="button" icon="pi pi-search-minus" styleClass="ml-2" onclick="PF('timelineWdgt').zoom(-0.5);" />
                <p:commandButton type="button" icon="pi pi-search-plus" styleClass="ml-2" onclick="PF('timelineWdgt').zoom(0.5);" />
            </f:facet>

            <f:facet name="loading">
                <h1>Loading please wait...</h1>
            </f:facet>
        </p:timeline>
    </div>
</h:form>


package org.primefaces.showcase.view.data.timeline;

import org.primefaces.model.timeline.TimelineEvent;
import org.primefaces.model.timeline.TimelineModel;

import java.io.Serializable;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.util.concurrent.ThreadLocalRandom;

import jakarta.annotation.PostConstruct;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

@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 = LocalDate.of(-140, 1, 1).atStartOfDay();
        end = LocalDate.of(-140, 1, 2).atStartOfDay();

        // 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 = start.minusHours(12).withMinute(0).withSecond(0).withNano(0);

            for (int i = 0; i < 5; i++) {
                LocalDateTime start = end.plusHours(Math.round(ThreadLocalRandom.current().nextDouble() * 5));
                end = start.plusHours(4 + Math.round(ThreadLocalRandom.current().nextDouble() * 5));

                long r = Math.round(ThreadLocalRandom.current().nextDouble() * 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;
    }
}

Timeline Custom

Timeline Tag Documentation

Usage

Reloading page