Timeline - Lazy loading of events

Timeline supports lazy loading of events during moving / zooming in the timeline. This makes sense when event's loading is time-consuming. Events are loaded lazy when p:ajax with event="lazyload" is attached to the p:timeline tag. The event class TimelineLazyLoadEvent contains one or two time ranges the events should be loaded for (two times ranges occur when you zoom out the timeline).

Note: The "lazyload" listener is not invoked again when the visible time range (incl. some hidden ranges defined by preloadFactor) already has lazy loaded events.

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

    <div id="loadingText" style="font-weight:bold; margin:-5px 0 5px 0; visibility:hidden;">Loading ...</div>

    <p:timeline id="timeline" value="#{lazyTimelineView.model}"
                 zoomMax="#{lazyTimelineView.zoomMax}" minHeight="170">
        <p:ajax event="lazyload" update="@none" listener="#{lazyTimelineView.onLazyLoad}"
                onstart="$('#loadingText').css('visibility', 'visible')"
                oncomplete="$('#loadingText').css('visibility', 'hidden')"/>

    <h:panelGrid columns="2" style="margin-top:15px">
        <p:spinner id="spinner" value="#{lazyTimelineView.preloadFactor}"
                   min="0" max="1" stepFactor="0.05"/>
        <p:commandButton value="Update Preload Factor" process="@this spinner" update="timeline"


Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega


Create awesome applications in no time using the premium templates and impress your users.