the project plan
A task list that draws its own schedule.
Give the plan a list of tasks and how they depend on one another, and it works out when each one can start and finish, how much slack it has, and which tasks have none. That last run, the tasks that cannot slip without moving the end date, is the critical path, and it is drawn in red so the risk in the plan is the first thing you see.
a schedule, not a drawing
The timeline is live, both ways.
A Gantt chart pasted from a spreadsheet is out of date the moment a date moves. This one is computed from your tasks, so every time you change a duration or drag a bar the whole schedule recomputes and the picture is the real one.
Drag a bar, or edit a cell
Drag a bar to move a task, or its edge to make it shorter or longer, and the new dates are written back to the row. Edit a start or a duration in the task grid beside it and the bar keeps up. The task list and the timeline are one plan seen two ways.
Honest about trouble
A task dragged earlier than its dependencies allow is flagged rather than quietly moved, so you see the conflict instead of shipping it. Anything running late is marked, and a deadline you set turns a slip into a warning you can act on.
what the plan gives you
A real project plan, in the box.
The critical path, computed
The schedule engine works out every task's earliest and latest start and finish and its slack, then draws the zero-slack run in red. Change anything and it recomputes, so the critical path is always the current one.
The four dependency links
Tasks depend on one another in each of the four standard ways, from finish-to-start through to start-to-finish, each with an optional lead or lag, and the arrows between the bars show how the plan holds together.
Milestones and summaries
A milestone sits as a diamond on the date it marks. A task made the parent of others becomes a summary rolled up from its children, its window and its progress derived from the work underneath it.
Progress and today
Each bar fills to show how far along its task is, and the timeline runs on a calendar axis with a line marking today, so the state of the plan reads at a glance and a task slipping behind is easy to spot.
Edit from the keyboard too
Focus a bar and the arrows move it, the shift key resizes it, and one key links two tasks. Every task carries a spoken description of its dates, progress and slack, and every edit is announced, so the plan is usable without a mouse.
Take it out of the page
Write the scheduled tasks out as a spreadsheet, or hand off the drawn chart as an image, so the plan on the screen becomes the plan in the status report without a second tool.
Because the plan is built from the tasks a grid already holds, the same live source that fills your grids can fill the plan too, and each change recomputes the schedule and redraws it, so the timeline stays current as the work moves.
a plan from a task list
The wiring reads the way the plan looks.
Drop in two script tags, then hand createGantt your tasks and how
they depend on one another. Call mount to draw the timeline, turn
on editable for drag-editing, and bind a task grid so a drag writes
the dates back and an edit in the grid redraws the bar.
The Gantt is a separate, opt-in module with a global of its own. It changes nothing in the grid core and a page that never shows a plan never loads it.
<!-- the grid and the gantt module, as globals -->
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid/lattice-grid.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid/modules/gantt.min.js"></script>
<script>
var createGantt = LatticeGridGantt.createGantt;
// Give it tasks and how they depend on one another; it works out the schedule.
var plan = createGantt({
tasks: [
{ id: 'design', name: 'Design', duration: 5, percentComplete: 100 },
{ id: 'build', name: 'Build', duration: 8, percentComplete: 40 },
{ id: 'launch', name: 'Launch', milestone: true }
],
dependencies: [
{ from: 'design', to: 'build', type: 'FS' }, // finish-to-start
{ from: 'build', to: 'launch', type: 'FS' }
]
});
// Draw it, and let a drag on a bar edit the dates.
plan.mount(document.querySelector('#plan'), {
editable: true,
today: 20340, // the today line
dateAxis: true // axis ticks as calendar dates
});
</script>Build the plan on localhost, free.
Development on localhost needs no licence key, so you can point the plan at your tasks and see the schedule compute before you decide anything. Licence per domain when you ship.
The Gantt API The board view Drive it from one feed Documentation