svelte-gantt

Open source MIT Svelte

Website GitHub

620

Stars

115

Forks

Issues

Watchers

1 year

Last Commit

JavaScript Libraries & Components Vector Graphics

About svelte-gantt

svelte-gantt

Website · Quickstart · Documentation

A **lightweight** and **fast** interactive gantt chart/resource booking component made with [Svelte](https://svelte.technology/). Compatible with any JS library or framework. ZERO dependencies. ![svelte-gantt](https://i.imgur.com/IqT5PL4.png) # 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: ```js import { SvelteGantt } from 'svelte-gantt'; ``` or use the IIFE build: ```html ``` Initialize svelte-gantt: ```js 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](https://github.com/ANovokmet/svelte-gantt/issues) or [contact me](https://github.com/ANovokmet).

Platforms

Web Self-hosted

Languages

Svelte

Links

Website Source Code

Published by

anovokmet

Visit View Profile

README.md

View on GitHub

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.

svelte-gantt

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="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.