Timeline - Grouping and mergeable events

Grouping events can be useful for example when showing availability of multiple people, rooms, or other resources next to each other.

Documentation
Overlapped Orders
Please choose Orders you want to merge with the Order 0

    <style type="text/css">
        div.vis-item-content {
            padding: 4px;
            border-radius: 2px;
            -moz-border-radius: 2px;
        }
    
        div.vis-item.vis-item-range {
            border-width: 0;
        }
    
        #overlappedOrders {
            margin-top: 20px;
            width: 100%;
        }
    
        #overlappedOrders .ui-chkbox {
            vertical-align: middle;
            margin: 3px 5px;
        }
    </style>
    
    
    <h:form id="form">
        <p:growl id="growl" showSummary="true" showDetail="false">
            <p:autoUpdate />
        </p:growl>
    
        <p:timeline id="timeline" value="#{groupingTimelineView.model}" var="order" varGroup="truck"
                    editable="true" eventMargin="0" eventMarginAxis="0" stackEvents="false"
                    orientationAxis="top" widgetVar="timelineWdgt">
            <p:ajax event="changed" update="@none" listener="#{groupingTimelineView.onChange}"/>
            <p:ajax event="delete" update="@none" listener="#{groupingTimelineView.onDelete}"/>
            <p:ajax event="add" update="@none" onstart="PF('timelineWdgt').cancelAdd()"/>
    
            <f:facet name="group">
                <h:graphicImage library="demo" name="images/timeline/truck.png" style="vertical-align:middle;" alt="Truck"/>
                <h:outputText value="Truck #{truck.code}" style="font-weight:bold;"/>
            </f:facet>
    
            <h:graphicImage library="demo" name="#{order.imagePath}" rendered="#{not empty order.imagePath}"
                            style="display:inline; vertical-align:middle;" alt="Order"/>
            <h:outputText value="Order #{order.number}"/>
        </p:timeline>
    
        <!-- Dialog with overlapped timeline events -->
        <p:dialog id="overlapEventsDlg" header="Overlapped Orders" widgetVar="overlapEventsWdgt"
                  showEffect="clip" hideEffect="clip">
            <h:panelGroup id="overlappedOrdersInner" layout="block" style="padding:10px;">
                <strong>
                    Please choose Orders you want to merge with the Order #{groupingTimelineView.selectedOrder}
                </strong>
    
                <p/>
    
                <p:selectManyMenu id="overlappedOrders" value="#{groupingTimelineView.ordersToMerge}"
                                  showCheckbox="true">
                    <f:selectItems value="#{groupingTimelineView.overlappedOrders}" var="order"
                                   itemLabel=" Order #{order.data.number}" itemValue="#{order}"/>
                    <sc:convertOrder events="#{groupingTimelineView.model.events}"/>
                </p:selectManyMenu>
            </h:panelGroup>
    
            <f:facet name="footer">
                <h:panelGroup layout="block" style="text-align:right; padding:2px; white-space:nowrap;">
                    <p:commandButton value="Merge" process="overlapEventsDlg" update="@none"
                                     action="#{groupingTimelineView.merge}"
                                     oncomplete="PF('overlapEventsWdgt').hide()"/>
                    <p:commandButton type="button" value="Close" onclick="PF('overlapEventsWdgt').hide()"/>
                </h:panelGroup>
            </f:facet>
        </p:dialog>
    </h:form>

    FREE THEMES

    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

    PREMIUM TEMPLATES

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