MicroGantt

Lightweight Gantt chart with schedules, task bars, drag-to-move, resize, dependency drawing, and collapsible groups.

JS: public/js/microgantt.js CSS: public/js/microgantt.css Version: 0.3.0

Quick start

Include the CSS and JS, then create a chart:

<link rel="stylesheet" href="/public/js/microgantt.css">
<script src="/public/js/microgantt.js"></script>

<div id="gantt"></div>

<script>
var chart = new MicroGantt('#gantt', {
  schedules: [
    { id: 'sprint-1', name: 'Sprint 1', start: '2026-03-01', end: '2026-03-14', color: '#5D9288' }
  ],
  tasks: [
    { id: 'PL-1', name: 'Design homepage', start: '2026-03-02', end: '2026-03-06', scheduleId: 'sprint-1', color: '#3B82F6', progress: 60 },
    { id: 'PL-2', name: 'Build API', start: '2026-03-05', end: '2026-03-10', scheduleId: 'sprint-1', dependencies: ['PL-1'] },
    { id: 'PL-3', name: 'Write docs', start: '2026-03-08', end: '2026-03-13' }
  ],
  viewMode: 'week',
  onTaskClick: function(task) { console.log('Clicked', task.id); },
  onTaskResize: function(task, start, end) { console.log('Resized', task.id, start, end); },
  onTaskMove: function(task, start, end) { console.log('Moved', task.id, start, end); },
  onDependencyCreate: function(fromId, toId) { console.log('Dependency', fromId, '→', toId); }
});
</script>

Constructor

new MicroGantt(selector, options)

Options

Schedule object

Schedules are group headers. Tasks with a matching scheduleId are nested under them and can be collapsed.

Task object

Tasks without valid start and end dates are filtered out.

Public methods

chart.update(schedules, tasks)

Replace all data and re-render.

chart.update(newSchedules, newTasks);

chart.setViewMode(mode)

Switch the time scale.

chart.setViewMode('month'); // 'day', 'week', or 'month'

chart.collapseAll() / chart.expandAll()

Collapse or expand all schedule groups.

chart.collapseAll();
chart.expandAll();

chart.render()

Re-render the chart with current in-memory data. Useful after modifying task data programmatically.

chart.render();

Internal data access

These internal properties can be used for live updates (e.g. reacting to side-panel changes):

Each parsed task object has a dependencies array that can be modified, followed by chart.render() to update the arrows.

Interactions

Drag to move

Click and drag a task bar horizontally to change its dates. The onTaskMove callback fires on release.

Resize

Drag the right edge of a task bar to change the end date. The onTaskResize callback fires on release.

Dependency drawing

Hover a task bar to reveal a small circle on its right edge. Drag from that circle to another task bar to create a dependency. The onDependencyCreate callback fires when the link is made. Dependencies render as dashed arrows with arrowheads.

Collapsible groups

Click the ▸/▾ toggle on a schedule row to collapse or expand its child tasks.

Label panel resize

Drag the thin divider between the label panel and the chart to resize the label column (min 140px, max 500px).

View mode toolbar

Click Day, Week, or Month in the toolbar to switch time scales.

Usage in the Tasks app

The Tasks app uses MicroGantt in two views:

Timeline tab (schedule-grouped)

Shows tasks grouped under schedule rows. Tasks are nested under their schedule and can be collapsed. Rendered by tasks/partials/gantt_init.html.

new MicroGantt(el, {
  viewMode: 'week',
  schedules: [...],       // All board schedules
  tasks: [...],           // All board tasks with start or due date
  onTaskClick: function(task) { /* open task detail panel */ },
  onTaskResize: function(task, newStart, newEnd) {
    MicroAPI.put('/tasks/' + task.taskId, { start_date: newStart, due_date: newEnd });
  },
  onTaskMove: function(task, newStart, newEnd) {
    MicroAPI.put('/tasks/' + task.taskId, { start_date: newStart, due_date: newEnd });
  },
  onDependencyCreate: function(fromId, toId) {
    MicroAPI.put('/tasks/' + toId, { blocked_by: fromId });
  }
});

Gantt tab (flat)

Shows all board tasks as a flat list — no schedule grouping. Rendered by tasks/partials/timeline_init.html.

new MicroGantt(el, {
  viewMode: 'week',
  schedules: [],          // Empty — no grouping
  tasks: [...],           // All board tasks, scheduleId set to null
  // Same callbacks as above
});

Persisting changes

Both views persist drag/resize/dependency changes via MicroAPI.put():

Dates are passed as YYYY-MM-DD strings and parsed server-side via date.fromisoformat().

Live dependency sync

When a task's blocked_by is changed from the side panel (task detail view), the Gantt/Timeline updates live without a full reload. The side panel dispatches a custom event:

// Dispatched by clearBlocker() / pickBlocker() in the task detail panel
document.dispatchEvent(new CustomEvent('gantt:dependency-changed', {
  detail: { taskId: 'PL-2', blockedBy: 'PL-1' }  // or blockedBy: '' to clear
}));

Both Gantt and Timeline listen for this event:

document.addEventListener('gantt:dependency-changed', function(e) {
  var task = gantt._taskMap[e.detail.taskId];
  if (task) {
    task.dependencies = e.detail.blockedBy ? [e.detail.blockedBy] : [];
    gantt.render();
  }
});

Single-date tasks

Tasks with only start_date or only due_date (but not both) are still rendered. The missing date is filled with the available one, producing a single-day bar on the chart.

CSS classes

All classes are prefixed with mg-.

CSS custom properties

MicroGantt reads these CSS variables (with fallbacks):