Svelte Gantt screenshot

Svelte Gantt

Author Avatar Theme by Anovokmet
Updated: 10 Feb 2025
606 Stars

:calendar: Interactive JavaScript Gantt chart/resource booking component

Overview

The Svelte Gantt is a lightweight and fast interactive gantt chart and resource booking component built with Svelte. It is compatible with any JavaScript library or framework and has zero dependencies.

Features

  • Large datasets
  • Drag and drop functionality
  • Tree view
  • Zooming in and out
  • Dependencies
  • Date ranges

Installation

To use the Svelte Gantt, you can either use ES6 imports in your code or use the IIFE build. Here are the steps to install and initialize the Svelte Gantt:

  1. Import the Svelte Gantt in your code:
import SvelteGantt from 'svelte-gantt';

or 2. Use the IIFE build:

<script src="path/to/svelte-gantt.iife.js"></script>
  1. Initialize the Svelte Gantt:
const gantt = new SvelteGantt({
  rows: [/* Array of rows */],
  tasks: [/* Array of tasks */],
  timeRanges: [/* Array of time ranges */],
  dependencies: [/* Array of dependencies */],
  // Other configuration options
});
  1. To run the example, open the index.html file located in the public folder.

Summary

The Svelte Gantt is a lightweight and fast interactive gantt chart and resource booking component made with Svelte. It offers features such as large datasets, drag and drop functionality, tree view, zooming in and out, and dependencies. It can be easily installed using ES6 imports or the IIFE build method.