Timeline - DragDrop Drag events from the list on the left side and drop them onto the timeline.
Drag and drop events

  • Event 1
  • Event 2
  • Event 3
  • Event 4
  • Event 5
  • Event 6
  • Event 7
  • Event 8
  • Event 9
  • Event 10
<p:growl id="growl" showSummary="true" showDetail="false" autoUpdate="true"/>

<div style="float:left; width: 130px;">
    <strong>Drag and drop events</strong>
    <p/>
    <p:dataList id="eventsList" value="#{dndTimelineView.events}"
                var="event" itemType="circle">
        <h:panelGroup id="eventBox" layout="box" style="z-index:9999; cursor:move;">
            #{event.name}
        </h:panelGroup>

        <p:draggable for="eventBox" revert="true" helper="clone" cursor="move"/>
    </p:dataList>
</div>    
<p:timeline id="timeline" value="#{dndTimelineView.model}" var="event"
            editable="true" eventMargin="10" eventMarginAxis="0" minHeight="250"
            start="#{dndTimelineView.start}" end="#{dndTimelineView.end}"
            style="margin-left:135px;" 
            dropActiveStyleClass="ui-state-highlight" dropHoverStyleClass="ui-state-hover">
    <p:ajax event="drop" listener="#{dndTimelineView.onDrop}" global="false" update="eventsList"/>

    <h:panelGrid columns="1">
        <h:outputText value="#{event.name}"/>
        <h:outputText value="#{event.start}">
            <f:convertDateTime dateStyle="short" type="time"/>
        </h:outputText>
        <h:outputText value="#{event.end}">
            <f:convertDateTime dateStyle="short" type="time"/>
        </h:outputText>
    </h:panelGrid>
</p:timeline>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.