Editing tasks

Let people update a schedule directly on the timeline. They can move a task, resize its dates, or drag its progress handle.

Connect edits to your stateCopy Anchor Link

Pass your task state to the chart and update it through onTasksChange. Move, resize, and progress editing are enabled by default.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

export function ProjectPlan({ initialTasks }: { initialTasks: Task[] }) {
  const [tasks, setTasks] = useState(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
    />
  );
}

A completed edit sends the full next array once. Pass it back as tasks to keep the change. Saving to a server and applying business rules belong in your app; see Events.

Change dates and progressCopy Anchor Link

Date edits move in steps determined by the timeline scale. They preserve the task's time of day rather than aligning it to midnight. Resizing keeps at least one drag step of duration, so resizing a shorter task can make it longer.

Escape does not cancel a move, resize or progress drag; the edit commits when the pointer is released.

With hierarchy enabled, moving a summary bar moves its descendants together. Its dates and progress come from its children, so those fields cannot be resized or dragged directly.

For precise typed values, use the detail panel. Date and progress edits also have keyboard controls.

Choose what people can editCopy Anchor Link

For a viewing-only chart, start with readOnly:

<ReactGanttChart tasks={tasks} readOnly />

For a chart where people can report progress but cannot change dates, disable the date gestures:

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  allowMove={false}
  allowResize={false}
/>

Tasks can override chart settings with their own permission fields. For example, readOnly: true locks a task, while allowProgressChange: true on that same task allows progress updates. Explicit task permissions can also override chart-wide readOnly.

See interaction configuration for precedence and props for the full set of controls. These flags control chart interactions; enforce application permissions when saving data too.

Keep dates within a windowCopy Anchor Link

Use minDate and maxDate to limit moves and resizes:

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  minDate="2026-03-01T00:00:00Z"
  maxDate="2026-04-01T00:00:00Z"
/>

Each task can supply its own bounds. Moving a summary bar respects the tightest bound among its descendants. A task longer than its allowed window keeps its duration and can extend past maxDate.

A working calendar can also snap dates to working days. Bounds apply after that snap, so a date held at a bound can fall on a non-working day. Drawn task drafts do not use these bounds.

Use touch and larger timelinesCopy Anchor Link

On touch screens and with a pen, hold a bar for 400 ms before dragging. A swipe scrolls the timeline. Narrow bars have no touch resize zones; use the detail panel or a more detailed scale to change their dates.

Moving or resizing near the timeline's horizontal edges scrolls it automatically. Set autoScrollOnDrag={false} to disable this behavior. Progress editing does not auto-scroll.

Related workflowsCopy Anchor Link

• Create tasks from a button or a drawn range.
• Reorder rows to change task order or hierarchy. Bars stay in their own rows when dragged.
• Connect dependencies to show relationships. Links do not automatically reschedule tasks.

The chart does not support selecting and editing multiple bars at once. Moving a summary bar is the way to move a whole project phase together.