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
<style type="text/css">    
    .ui-datalist-item .ui-draggable:hover {
        background: #eeeeee;

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

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

        <p:draggable for="eventBox" revert="true" helper="clone" cursor="move"/>
<p:timeline id="timeline" value="#{dndTimelineView.model}" var="event"
            editable="true" eventMargin="10" eventMarginAxis="0" minHeight="250"
            start="#{dndTimelineView.start}" end="#{dndTimelineView.end}"
            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 type="localDateTime" pattern="hh:mm:ss a"/>
        <h:outputText value="#{event.end}">
            <f:convertDateTime type="localDateTime" pattern="hh:mm:ss a"/>


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


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