JARCH SHOWCASE
JARCH SHOWCASE
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
<a:growl id="growl" showSummary="true" showDetail="false" autoUpdate="true"/>

<div style="float:left; width: 130px;">
    <strong>Drag and drop events</strong>
    <p/>
    <a: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>

        <a:draggable for="eventBox" revert="true" helper="clone" cursor="move"/>
    </a:dataList>
</div>    
<a: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">
    <a: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>
</a:timeline>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.