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">
        <p:autoUpdate />
    </p:growl>

    <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>