GanttNew in 0.7.0

Usage

import { useState } from "react";
import { Gantt, type GanttTask } from "@vesture/react";

const [tasks, setTasks] = useState<GanttTask[]>([
  { id: "plan", name: "Planning", start: "2026-03-02", end: "2026-03-13" },
  { id: "scope", name: "Scope", start: "2026-03-02", end: "2026-03-06", parentId: "plan", progress: 100 },
  { id: "build", name: "Build", start: "2026-03-16", end: "2026-04-03", dependsOn: ["plan"] },
  { id: "ship", name: "Release", start: "2026-04-06", end: "2026-04-06", type: "milestone", dependsOn: ["build"] },
]);

<Gantt
  tasks={tasks}
  onTaskChange={(id, change) =>
    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, ...change } : t)))
  }
  isTaskEditable={(t) => (t.progress ?? 0) < 100}
  columns={[{ key: "done", header: "Done", width: 60, render: (t) => `${t.progress ?? 0}%` }]}
/>

Behavior

• Read-only until you pass onTaskChange. With it, bars move by dragging the body and resize by dragging either edge; focused bars also move with ←/→ and resize their end with Shift+←/→. Gantt never mutates your tasks — it reports { start, end } and you apply it (the demo does exactly that).
• A task that has children (via parentId) becomes a summary bar spanning them, with an expand/collapse toggle. Summary bars are never directly editable — edit the children instead.
• Dates are ISO strings (YYYY-MM-DD), end inclusive. Internally they are whole UTC days, so daylight-saving changes never shift a bar by a day.
• dependsOn draws elbow arrows from the end of each predecessor to the start of the task. Arrows follow live while you drag, and are hidden when either end is inside a collapsed group.
• type: "milestone" renders a diamond on the task's start day; it can be moved but not resized.
• snapDays makes drags and arrow keys move in multiples (7 = whole weeks). isTaskEditable locks individual tasks even when editing is on — for example completed work.
• Task colors resolve task.color → getBarColor(task) → the theme primary, so a status palette is one callback.
• columns adds fields beside the task name (owner, % done, dates…); range pins the visible dates; scale="week" thins the day labels for long projects; weekendDays defines non-working days.