https://github.com/ANovokmet/svelte-gantt

:calendar: Interactive JavaScript Gantt chart/resource booking component
https://github.com/ANovokmet/svelte-gantt

angular-gantt booking gantt gantt-chart hacktoberfest interactive javascript-gantt js-gantt react-gantt svelte svelte-gantt vue-gantt

Last synced: about 1 month ago
JSON representation

:calendar: Interactive JavaScript Gantt chart/resource booking component

• Host: GitHub
• URL: https://github.com/ANovokmet/svelte-gantt
• Owner: ANovokmet
• License: mit
• Created: 2019-10-20T17:26:58.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-18T20:36:11.000Z (3 months ago)
• Last Synced: 2024-11-09T05:04:01.328Z (about 2 months ago)
• Topics: angular-gantt, booking, gantt, gantt-chart, hacktoberfest, interactive, javascript-gantt, js-gantt, react-gantt, svelte, svelte-gantt, vue-gantt
• Language: Svelte
• Homepage: https://anovokmet.github.io/svelte-gantt/
• Size: 3.49 MB
• Stars: 530
• Watchers: 21
• Forks: 107
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        


    

        

    





    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).