svelte-gantt

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

Dependent on Moment.js.

Features include: Large datasets, drag'n'drop, tree view, zooming in/out, dependencies, date ranges...

DEMO: Large dataset, Tree, Dependencies

Installation

npm install svelte-gantt

Use ES6 imports in your code:

import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';

or use the IIFE build:

<link  rel='stylesheet'  href='node_modules/svelte-gantt/css/svelteGantt.css'>

<script  src='moment.js'></script>
<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
});

..or run the example by opening ./public/index.html

Documentation

Pass options object as props to the SvelteGantt constructor. To update use $set, eg.

gantt.$set({ 
    from: moment().startOf('week'),
    to: moment().endOf('week')
});

rows {Array} Rows to load in the gantt, see below.
tasks {Array} Tasks that display in the gantt, see below.
timeRanges {Array} Timeranges that display in the gantt, see below.
dependencies {Array} Dependencies that display in the gantt, used with the SvelteGanttDependencies module, see below.
from {Moment} Datetime timeline starts on.
to {Moment} Datetime timeline ends on.
minWidth {Number} Minimum width of gantt area in px.
fitWidth {Boolean} Should timeline stretch width to fit.
magnetUnit {String} Minimum unit of time task date values will round to.
magnetOffset {Number} Amount of units task date values will round to.
columnUnit {String} Duration unit of columns.
columnOffset {Number} Duration width of column.
- eg. columnUnit: 'minute', columnOffset: 15 will create a column for every 15 minutes.
headers {Array} List of headers used for main gantt area.
zoomLevels {Array} List of zoom levels for gantt. Gantt cycles trough these parameters on ctrl+scroll.
rowHeight {Number} Height of a single row in px.
rowPadding {Number} Padding of a single row in px.
ganttTableModules {Array} Modules used in gantt table area.
- eg. [SvelteGanttTable]
ganttBodyModules {Array} Modules used in gantt body area.
- eg. [SvelteGanttDependencies]
reflectOnParentRows {Boolean} When task is assigned to a child row display them on parent rows as well, used when rows are disabled as a tree.
reflectOnChildRows {Boolean} When task is assigned to a parent row display them on child rows as well, used when rows are disabled as a tree.
classes {String|Array} Custom CSS classes to apply to gantt.
resizeHandleWidth {Number} Width of handle for resizing tasks, in px.
onTaskButtonClick {Function} Callback for task button clicks.
- eg. (task) => console.log('clicked on: ', task)
taskContent {Function} ,task content factory function.
- eg. (task) => `<div>Task ${task.model.label}</div>`
tableWidth {Number} Width of table, used with SvelteGanttTable module.
tableHeaders {Array} Headers of table, used with SvelteGanttTable module.
columnStrokeColor {string} Color of column lines.
- eg. '#efefef'
columnStrokeWidth {number} Width of column lines.

Header

Represents a row of header cells that render over the gantt.

unit {String} Time unit used to display header cells.
- eg. 'day' will create a cell in the header for each day in the timeline.
format {String} Datetime format used to label header cells.
- eg. 'DD.MM.YYYY', 'HH'
offset {Number} Duration width of header cell.
sticky {Boolean} Use sticky positioning for header labels.

Table Header

Represents a single column rendered in SvelteGanttTable.

title {String} Label to display in the table column header.
property {String} Property of row to display in table column cells.
width {Number} Width of table column, in px.

Zoom level

Represents a zoom level which cycle on ctrl+scroll.

headers {Array} See above.
minWidth {Number} See above.
fitWidth {Boolean} See above.

Row

Rows are defined as a list of objects. Rows can be rendered as a collapsible tree (rows are collapsed with SvelteGanttTable module). Row objects may have these parameters:

id {Number|String} Id of row, every row needs to have a unique one.
classes {String|Array} Custom CSS classes to apply to row.
contentHtml {String} Html content of row, renders as background to a row.
enableDragging {Boolean} enable dragging of tasks to and from this row.
label {String} Label of row, could be any other property, can be displayed with SvelteGanttTable.
headerHtml {String} Html content of table row header, displayed in SvelteGanttTable.
children {Array} List of children row objects, these can have their own children.

Task

Tasks are defined as a list of objects:

id {Number|String} Id of task, every task needs to have a unique one.
amountDone {Number} Task completion in percent, indicated on task.
classes {String|Array} Custom CSS classes to apply to task.
from {Moment} Datetime task starts on.
to {Moment} Datetime task ends on.
label {String} Label of task.
html {String} Html content of task, will override label.
showButton {Boolean} Show button bar.
buttonClasses {String|Array} Button classes, useful for fontawesome icons.
buttonHtml {String} Html content of button.
enableDragging {Boolean} enable dragging of task.

Dependencies

Renders a dependency between two tasks. Used by SvelteGanttDependencies module:

id {Number|String} Unique id of dependency.
fromId {Number|String} Id of dependent task.
toId {Number|String} Id of dependency task.
stroke {String} Stroke color.
- eg. 'red' or '#ff0000'
strokeWidth {Number} Width of stroke.
arrowSize {Number} Size of the arrow head.

Time ranges

Renders a block of time spanning all the rows:

id {Number|String} Unique id of time range.
from {Moment} Datetime timeRange starts on.
to {Moment} Datetime timeRange ends on.
classes {String|Array} Custom CSS classes.
label {String} Display label.

Methods

selectTask(id) Selects task by id.
- id {Number|String} Id of task
unselectTasks() Unselects tasks.
scrollToTask(id, scrollBehavior) Scrolls the view to a task.
- id {Number|String} Id of task
- scrollBehaviour {String} auto or smooth.
scrollToRow(id, scrollBehavior) Scrolls the view to a row.
- id {Number|String} Id of row
- scrollBehaviour {String} auto or smooth.
updateTask(model) Updates or inserts task.
- model {Task} Task object
updateTasks(models) Updates or inserts tasks.
- models {Array<Task>} Task objects
updateRow(model) Updates or inserts row.
- model {Row} Row object
updateRows(models) Updates or inserts rows.
- models {Array<Row>} Row objects
getTask(id) Get task by id.
- id {Number|String} Id of task
getRow(id) Get row by id.
- id {Number|String} Id of row
getTasks(rowId) Get tasks by row id.
- rowId {Number|String} Id of row

Events

Synchronously run callbacks on specific events. Subscribe to these after gantt is created.

gantt.api.tasks.on.select((task) => console.log('Listener: task selected', task));

`gantt.api.tasks`

move (task) Runs while task is moving.
switchRow (task, row, previousRow) Runs when user switches row of task.
select (task) Runs when user selects task.
moveEnd (task) Runs when user stops moving task.
change (task) Runs after dropping a task, before it is updated.
changed (task) Runs after dropping a task, after it is updated.

Available modules

SvelteGanttTable Renders a table on the left side of gantt. Needed for row labels.
SvelteGanttDependencies Renders dependencies between tasks.
SvelteGanttExternal Enables external DOM elements to be draggable to svelte-gantt. Useful for creating new tasks:

new SvelteGanttExternal(
    // external DOM element
    document.getElementById('newTaskButton'), 
    // options
    {
        // reference to instance of svelte-gantt 
        gantt,
        // if enabled
        enabled: true,
        // success callback
        // row: row element was dropped on
        // date: date element was dropped on
        // gantt: instance of svelte-gantt
        onsuccess: (row, date, gantt) => {
            // here you can add a task to row, see './public/main.js'
        },
        // called when dragged outside main gantt area
        onfail: () => { },
        // factory function, creates HTMLElement that will follow the mouse
        elementContent: () => {
            const element = document.createElement('div');
            element.innerHTML = 'New Task';
            Object.assign(element.style, {
                position: 'absolute',
                background: '#eee',
                padding: '0.5em 1em',
                fontSize: '12px',
                pointerEvents: 'none',
            });
            return element;
        }
    }
);

Development build

If you want to build from sources: Install the dependencies...

cd svelte-gantt
npm install

...then start Rollup:

npm run dev:docs

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Build the package

To build the package yourself:

Clone or download repository.
Run the build:

node tools/build

The package is built in ./dist

Issues

Transitions on task drop sometimes do not play - issue introduced in Svelte 3

TBD

Context-menus (click on row, task or dependency)

ArmanNik/svelte-gantt