svelte-gantt

Website · Quickstart · Documentation

A lightweight and fast interactive gantt chart/resource booking component made with Svelte. Compatible with any JS library or framework. ZERO dependencies.

Features

• High performance - display large datasets
• Interactive - drag and drop elements
• Tree view
• Zoom in/out
• Dependencies
• Date ranges
• ...

Getting started

npm install svelte-gantt

Import the component:

import { SvelteGantt } from 'svelte-gantt';

or use the IIFE build:

<script src="https://raw.githubusercontent.com/ANovokmet/svelte-gantt/main/node_modules/svelte-gantt/index.iife.js"></script>

Initialize svelte-gantt:

var options = {
    /* ... */
};

var gantt = new SvelteGantt({
    // target a DOM element
    target: document.getElementById('example-gantt'),
    // svelte-gantt options
    props: options
});

Need help?

I am happy to help you. Post an issue or contact me.