arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Gantt
This example shows a project plan with 8 tasks, dependencies and progress. Drag a bar to reschedule it, drag its ends to resize it, drag the progress handle to change completion, click a task or a date cell, or switch the view mode. Every interaction fires an ajax event shown below as "Last action".

Website relaunch plan

Drag bars to reschedule, stretch ends to resize, move the handle to update progress.

Week view
Selected:noneLast action:interact with the chart
Source

<div class="gantt-demo">
        <div class="gantt-demo-header">
            <div>
                <p class="gantt-demo-title">Website relaunch plan</p>
                <p class="gantt-demo-subtitle">Drag bars to reschedule, stretch ends to resize, move the handle to update progress.</p>
            </div>
            <p:chip label="#{ganttController.viewMode} view" icon="pi pi-calendar" />
        </div>
        <div class="gantt-demo-body">
            <pe:gantt id="gantt"
                      widgetVar="ganttViewWidget"
                      tasks="#{ganttController.tasks}"
                      viewMode="#{ganttController.viewMode}"
                      todayButton="true"
                      viewModeSelect="true"
                      showProgress="true"
                      columnWidth="45"
                      barHeight="30"
                      dateFormat="YYYY-MM-DD"
                      lang="en"
                      style="height:400px">
                <p:ajax event="click" listener="#{ganttController.onTaskClick}" update="lastAction selectedTask growl" />
                <p:ajax event="dateChange" listener="#{ganttController.onDateChange}" update="lastAction selectedTask growl" />
                <p:ajax event="progressChange" listener="#{ganttController.onProgressChange}" update="lastAction selectedTask growl" />
                <p:ajax event="viewChange" listener="#{ganttController.onViewChange}" update="lastAction selectedTask growl" />
                <p:ajax event="dateClick" listener="#{ganttController.onDateClick}" update="lastAction selectedTask growl" />
            </pe:gantt>
        </div>
        <div class="gantt-demo-status">
            <span><strong>Selected:</strong><h:outputText id="selectedTask" value="#{empty ganttController.selectedTaskId ? 'none' : ganttController.selectedTaskId}" /></span>
            <span><strong>Last action:</strong><h:outputText id="lastAction" value="#{empty ganttController.lastAction ? 'interact with the chart' : ganttController.lastAction}" /></span>
        </div>
    </div>
            
Components and more
Use Cases
Documentation pe:gantt
Attributes (move mouse over the names to see data types)
Name Description
barHeightBar height in pixels.Default is 30.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
columnWidthColumn width in pixels.Default is 45.
converterEL expression resolves to a converter instance or literal converter ID defining a component converter.
dateFormatDate format.Default is YYYY-MM-DD.
extenderName of javascript function to extend the widget.
idUnique identifier of the component in a namingContainer.Default is generated.
infinitePaddingEnable infinite scroll padding.Default is true.
langLocale/language.Default is en.
readonlyEnable readonly mode to disable all editing.Default is false.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showExpectedProgressShow expected progress bar.Default is false.
showProgressShow the progress bar on tasks.Default is true.
snapAtSnap at interval.Default is 1d.
styleInline style of the component.
styleClassStyle class of the component.
tasksThe tasks to display in the Gantt chart.
todayButtonEnable the today button.Default is true.
valueValue of the component.
viewModeThe initial view mode.Default is Day.
viewModeSelectShow the view mode selector dropdown.Default is false.
weekendColorWeekend highlight color.
widgetVarName of the client side widget.Default is generated ('widget_' + componentClientId).
PrimeFaces Extensions Showcase - © 2011-2026,PrimeFaces: 17.0.0-SNAPSHOT,PrimeFaces Extensions: 17.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-09-27 13:51