Gantt

A task plan on a time axis. The task list is a WAI-ARIA treegrid that holds everything: WBS number, dates, duration, progress and predecessors, all editable inline. Beside it are bars, summary brackets, milestones, finish-to-start links, a today marker and non-working days. Drag a bar to move it, pull its end to resize, or drag its handle onto another bar to link them. Successors are auto-scheduled on working days.

Installation

Usage

import { Gantt } from "@vamos-ui/react/scheduler";
import { trWorkCalendar } from "@vamos-ui/react/locale-data";

<Gantt
  tasks={tasks}            // { id, parentId?, title, start, end (YYYY-MM-DD, inclusive), progress?, type? }
  links={links}            // { id, from, to, type: "FS", lagDays? }
  defaultScale="week"
  workCalendar={trWorkCalendar}
  onTaskChange={(batch) => api.tasks.updateMany(batch)}   // the task + every pushed successor
  onLinkCreate={(l) => api.links.create(l)}
/>

// Scheduling without React (server, worker)
import { scheduleForward, detectCycles } from "@vamos-ui/react/scheduler";

The treegrid is the accessible source of truth, and the timeline is aria-hidden. Use ↑/↓ for rows, ←/→ for cells (on the first cell, ← and → collapse and expand), Home and End, and Enter or F2 to edit a cell. Enter saves and Escape cancels. Date edits are the non-drag path (WCAG 2.5.7).

Bars are opaque colour mixes with no blur. The timeline sits on one surface.

The first release has finish-to-start links only. Critical path, baselines and RTL timeline mirroring come later.

Examples

API