Examples
Ready-to-run example projects for React, Vue, and Angular. Clone the repo, install dependencies, and start exploring.
Quick start — single example
git clone https://github.com/timelinekit/examples.git
cd examples/react/gantt-basic
npm install
npm run devRun all examples at once
Use the convenience scripts in the scripts/ folder to install dependencies, build, and launch all examples for a framework with a single command:
scripts\run-react-examples.cmd # React examples on ports 4000+
scripts\run-vue-examples.cmd # Vue examples on ports 4000+
scripts\run-angular-examples.cmd # Angular examples on ports 4000+By default, the scripts run in quick mode — only TimelineKit packages are updated. Pass --reinstall for a clean install of all dependencies.
To stop all running examples, press any key in the script's terminal window.
React
6 examplesGantt Chart — Basic
Tasks, milestones, dependencies, and drag-and-drop editing.
Gantt Chart — Programmatic
Build a Gantt chart using the programmatic API: createTask, addTask, addLink, and hierarchy.
Gantt — Resource Management
Resource assignment, capacity tracking, and working calendar configuration.
Resource Scheduler — Basic
Schedule events across resources with drag-and-drop and multi-lane layout.
Event Calendar — Basic
Day, week, and month views with event creation and drag-and-drop.
Next.js App Router
Integration with Next.js App Router, client components, and environment-based licensing.
Vue
4 examplesGantt Chart — Basic
Tasks, milestones, dependencies, and drag-and-drop editing.
Gantt Chart — Programmatic
Build a Gantt chart using the programmatic API: createTask, addTask, addLink, and hierarchy.
Resource Scheduler — Basic
Schedule events across resources with drag-and-drop and multi-lane layout.
Event Calendar — Basic
Day, week, and month views with event creation and drag-and-drop.
Angular
4 examplesGantt Chart — Basic
Tasks, milestones, dependencies, and drag-and-drop editing.
Gantt Chart — Programmatic
Build a Gantt chart using the programmatic API: createTask, addTask, addLink, and hierarchy.
Resource Scheduler — Basic
Schedule events across resources with drag-and-drop and multi-lane layout.
Event Calendar — Basic
Day, week, and month views with event creation and drag-and-drop.
Need help getting started?
Check the documentation for detailed guides and API reference.