• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Gantt

Gantt is a modern, interactive Gantt chart component with drag-and-drop task rescheduling, progress editing, dependency arrows and multiple view modes (Quarter Day, Half Day, Day, Week, Month, Year). Based on frappe-gantt by Frappe Technologies.

Gantt Tag Documentation

Gantt is a modern, interactive gantt chart component.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
barHeight Integer false 30 Bar height in pixels.
columnWidth Integer false 45 Column width in pixels.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
dateFormat String false YYYY-MM-DD Date format.
extender String false Name of javascript function to extend the widget.
infinitePadding Boolean false true Enable infinite scroll padding.
lang String false en Locale/language.
readonly Boolean false false Enable readonly mode to disable all editing.
showExpectedProgress Boolean false false Show expected progress bar.
showProgress Boolean false true Show the progress bar on tasks.
snapAt String false 1d Snap at interval.
style String false Inline style of the component.
styleClass String false Style class of the component.
tasks List false The tasks to display in the Gantt chart.
todayButton Boolean false true Enable the today button.
value Object false Value of the component.
viewMode String false Day The initial view mode.
viewModeSelect Boolean false false Show the view mode selector dropdown.
weekendColor String false Weekend highlight color.
Tag Documentation Widget Source
Basic Usage

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

Usage


<style>
    .gantt-demo { border: 1px solid var(--p-content-border-color); border-radius: 10px; overflow: hidden; }
    .gantt-demo-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .8rem 1rem; background: light-dark(var(--p-surface-50), var(--p-surface-950)); border-bottom: 1px solid var(--p-content-border-color); }
    .gantt-demo-title { font-weight: 600; font-size: 1.05rem; margin: 0; }
    .gantt-demo-subtitle { font-size: .85rem; opacity: .7; margin: .15rem 0 0; }
    .gantt-demo-body { padding: 0; }
    .gantt-demo-status { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .7rem 1rem;
        border-top: 1px solid var(--p-content-border-color); background: light-dark(var(--p-surface-50), var(--p-surface-950)); font-size: .9rem; }
    .gantt-demo-status strong { margin-right: .35rem; }
</style>

<div class="card">
    <h5>Basic Usage</h5>
    <p>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".</p>
    <h:form id="formBasicUsage">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <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 messages" />
                    <p:ajax event="dateChange" listener="#{ganttController.onDateChange}" update="lastAction selectedTask messages" />
                    <p:ajax event="progressChange" listener="#{ganttController.onProgressChange}" update="lastAction selectedTask messages" />
                    <p:ajax event="viewChange" listener="#{ganttController.onViewChange}" update="lastAction selectedTask messages" />
                    <p:ajax event="dateClick" listener="#{ganttController.onDateClick}" update="lastAction selectedTask messages" />
                </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>
    </h:form>
</div>