Timeline - Two Linked Timelines When moving one timeline, the other moves along. Use mouse scroll wheel for zoom-in and zoom-out. A click on an event in the first timeline selects an event in the second timeline (Project A or Project B).

Events

Projects

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

    <h3 style="margin-top: 0">Events</h3>
    <p:timeline id="timelineFirst" value="#{linkedTimelinesView.modelFirst}" var="task"  
                height="250px" widgetVar="timelineFirstWdgt">  
        <p:ajax event="rangechange" oncomplete="onrangechange1()"/>  
        <p:ajax event="select" listener="#{linkedTimelinesView.onSelect}"/>  

        <h:panelGroup layout="block" rendered="#{not task.period}" style="padding-bottom:5px">  
            <h:outputText value="#{task.title}"/>  
        </h:panelGroup>  
        <p:graphicImage library="demo" name="#{task.imagePath}"/>  
        <h:panelGroup rendered="#{task.period}" style="padding:8px">  
            <h:outputText value="#{task.title}"/>  
        </h:panelGroup>  
    </p:timeline>  

    <h3>Projects</h3>
    <p:timeline id="timelineSecond" value="#{linkedTimelinesView.modelSecond}"  
                height="150px" widgetVar="timelineSecondWdgt">  
        <p:ajax event="rangechange" oncomplete="onrangechange2()"/>  
    </p:timeline>  
</h:form>



<script type="text/javascript">
    function onrangechange1() {
        var range = PF('timelineFirstWdgt').getVisibleRange();
        PF('timelineSecondWdgt').setVisibleRange(range.start, range.end);
    }

    function onrangechange2() {
        var range = PF('timelineSecondWdgt').getVisibleRange();
        PF('timelineFirstWdgt').setVisibleRange(range.start, range.end);
    }
</script>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.