TimelineGantt

Basic usage

rows is the array of task rows; each row’s bars is the list of time spans on that row. start / end set the visible range, day-width controls the pixel width of one day, and today is marked with a vertical accent line.

Editable (drag + resize)

With editable, bars become draggable; left/right handles appear for one-sided resize. Mutations are surfaced via the @bar-change event with { bar, row, next: { start, end }, meta } so the host writes them back into its own model.

Groups + dependencies

A row may declare group: string — the component injects a section header in first-encounter order (synced between sidebar and body). dependencies is an array of bar-id pairs; the component draws an arrowed elbow line between the source’s right edge and the target’s left edge.

API

Props

Types

interface GanttRow {
  id: string;
  label: string;
  group?: string;
  bars: GanttBar[];
}

interface GanttBar {
  id: string;
  start: DateLike;
  end: DateLike;
  label?: string;
  color?: string;     // overrides default accent
  progress?: number;  // 0–1 completion overlay
  disabled?: boolean;
}

interface GanttDependency {
  from: string;
  to: string;
}

Events

• Vue: @bar-click(bar, row) / @row-click(row) / @bar-change({ bar, row, next, meta })
• React: onBarClick / onRowClick / onBarChange

meta.action is one of 'move' | 'resize-start' | 'resize-end'. meta.prev is the original { start, end } before the drag began.