Gantt Charts & Timelines

Interactive Gantt planner with dependencies, critical path, and Excel export.

Overview

This single-page app helps project managers build and visualize task schedules. AG-Grid lists every task with dates, duration, progress, dependencies, and resource assignment. A CSS Gantt chart shows bars on a week or month timeline — drag the right edge of a bar to resize its end date. Alpine.js powers the add-task form and timeline controls.

Key features

Task grid

• Columns: ID, Task, Start, End, Duration, Progress, Dependencies, Resource
• Nine sample tasks including milestones for a software rollout plan
• Progress bar cell renderer for completion percentage
• Critical-path rows bolded when highlight is enabled

Visual Gantt chart

• CSS timeline with week or month scale toggle
• Colored bars sized to start/end dates; progress overlay on each bar
• Drag-to-resize on bar right edge updates end date and duration
• Milestone markers shown as diamond shapes on the timeline
• Critical path tasks highlighted in red when toggle is on

Dependencies & milestones

• Dependencies stored as comma-separated task IDs (e.g. `2, 5`)
• Milestone checkbox creates zero-duration markers
• Critical path simulated by walking longest dependency chains

Add task form

• Alpine.js form: name, dates, progress slider, dependencies, resource, milestone flag

Timeline controls

• Weeks / Months scale buttons rebuild header ticks
• Highlight critical path checkbox tints critical tasks and bars
• Excel export and import via SheetJS

Summary dashboard

• Total tasks, milestones, average progress, critical path count, plan duration (days)

Persistence & theme

• Tasks saved in `localStorage` (`ganttCharts_v1`)
• Dark mode toggle with saved preference
• Reset plan restores sample tasks

Data & persistence

• Sample plan: kickoff → requirements → design → development → testing → go-live
• Storage key: `ganttCharts_v1` for tasks; `ganttCharts_dark` for theme
• Import replaces the full plan after confirmation

Charts & reporting

• Summary KPI cards (not Chart.js — numeric dashboard)
• Excel export includes all task fields for stakeholder reports

Built with

Tailwind CSS, AG-Grid Community, Alpine.js, and SheetJS — all from CDN in one HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.