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: 2 months 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 (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-10T09:33:07.000Z (5 months ago)
- Last Synced: 2025-04-19T17:22:35.171Z (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.15 MB
- Stars: 565
- Watchers: 20
- Forks: 114
- Open Issues: 35
-
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.
# 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).