shadcn.io is not affiliated with official shadcn/ui
Gantt Chart Task List Block for Vue
Six tasks as bars on ten working days with a marker on today, dependency elbows, buttons that shift or resize a task and name the date they reach, dependents that are pushed, refusals in words and an undo.
Installation
Overview
Schedule work that depends on other work, with this Gantt chart to-do list block for Vue with Ark UI. A scrolling grid shows ten working days, Mon 12 to Fri 23 Oct, with the task labels pinned at the start and a marker on Wed 14, today. Each of six tasks is a bar whose length is its working days, joined by dashed elbows to the tasks it waits for. Under each label four Button controls, Earlier, Later, Shorter and Longer, are named with the task and the date they reach, for example "Start 'Pack the print room' later, on Wed 14 Oct". Moving or lengthening a task pushes the tasks that depend on it by exactly the overlap and says how many moved; a move that would start before a prerequisite finishes, or run past Fri 23 Oct, is refused in words and changes nothing. Done tasks are filled bars with a Checkbox and stay put, and one Undo puts back the last change. A table for screen readers lists every start, finish and prerequisite. Bands are ruled by Guides. For project plans, moves and launches with a chain of steps.
FAQ
How are dependents pushed?
After a change, every task is checked in order and starts no earlier than the day after its prerequisites finish. A task already late enough stays where it is, so only the overlap is absorbed. The status message counts the tasks that moved: "Moved 'Pack the print room' to Wed 14 Oct. Pushed 2 tasks."
When is a move refused?
When the task is done, when it would start before a prerequisite finishes, before Mon 12 Oct, or when the push would carry any task past Fri 23 Oct. The message says which, and the plan is left as it was. Shortening below one day is refused too.
What stays local, and how do I save for real?
The schedule. Nothing is sent and it resets when you reload. In your app write the new start and length from move, and let your server settle dependants too if other people edit the same plan. The days are fixed in DAYS and "today" is a constant, so replace both with your calendar.
Is it accessible?
The bars and elbows are decorative and hidden from assistive technology; the hidden table beside them carries the same facts. The four buttons per task have names with the date they reach, disabled ones stay focusable and say why in the status, and one polite message reports each result.