A collection of ready-to-run examples demonstrating TimelineKit components.
TimelineKit provides three main components:
- GanttChart - Project scheduling with tasks, dependencies, milestones, and resource management
- ResourceScheduler - Resource-based scheduling with time-blocked events
- EventCalendar - Calendar views (day/week/month) with recurrence support
| Example | Description |
|---|---|
| gantt-basic | Basic Gantt chart with tasks, links, and milestones |
| gantt-chart-programmatic | Programmatic control of Gantt chart via component ref |
| gantt-resource-management | Gantt chart with resource assignment and working calendar |
| resource-scheduler-basic | Basic resource scheduler with drag & drop |
| event-calendar-basic | Event calendar with day/week/month views |
| nextjs-app-router | Integration with Next.js App Router |
| Example | Description |
|---|---|
| gantt-basic | Basic Gantt chart with tasks, links, and milestones |
| gantt-chart-programmatic | Programmatic control of Gantt chart via component ref |
| resource-scheduler-basic | Basic resource scheduler with drag & drop |
| event-calendar-basic | Event calendar with day/week/month views |
| Example | Description |
|---|---|
| gantt-basic | Basic Gantt chart with tasks, links, and milestones |
| gantt-chart-programmatic | Programmatic control of Gantt chart via component ref |
| resource-scheduler-basic | Basic resource scheduler with drag & drop |
| event-calendar-basic | Event calendar with day/week/month views |
Each example is a standalone project. To run any example:
cd react/gantt-basic # or any other example
npm install
npm run devFor image, PDF, and Excel export support, also install the optional dependencies:
npm install html2canvas jspdf exceljsTo install, build, and run all examples for a framework at once, use:
scripts\run-react-examples.cmd # React examples
scripts\run-vue-examples.cmd # Vue examples
scripts\run-angular-examples.cmd # Angular examplesBy default, only TimelineKit packages are updated (quick mode). Pass --reinstall for a clean install of all dependencies.
- Node.js 18+
- npm 9+
All examples work out of the box without a license key. Without a key, TimelineKit runs in evaluation mode — fully functional, with a watermark displayed over the component.
To remove the watermark, get a license key at timelinekit.com and set it as an environment variable:
# Vite-based examples (react/*, vue/*)
echo "VITE_TK_LICENSE_KEY=your-key-here" > .env
# Next.js example (react/nextjs-app-router)
echo "NEXT_PUBLIC_TK_LICENSE_KEY=your-key-here" > .env.local- Documentation
- Live Demos
- API Reference