anovokmet/svelte-gantt

:calendar: Interactive JavaScript Gantt chart/resource booking component

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

svelte-gantt's Issues

Overlapping Events, Event Bar below other

Hello,

Is there a way to have overlapping events in a row below each other and not visually overlapping?

Any hint how to achieve that, is appreciated!

edit: I see, it was discussed already
#19 (comment)
Any news regarding this?

Thanks
Martin

Drag to Gantt does not round task time

@ANovokmet When using SvelteGanttExternal to implement the functionality to drag a new task to the Gantt chart, it does not round/respect the default magnetOffset which is 15. For example, even on https://anovokmet.github.io/svelte-gantt/, if you use the drag to Gantt functionality, and try dragging it leaving the mouse somewhere in the middle of lines e.g. at 08:06am, this will work. And then the console log also proves this as well. So it is not respecting the default magnetOffset. However, afterwards, when moving the newly added task, it does respect it.

EDIT: Found another bug when dragging a new task to the Gantt:

When dragging a new task to the Gantt chart, by default, the colour whilst dragging is blue. However, when dropping the task i.e. letting go off the mouse, the task maybe a different colour like orange. Would be good if the task bar had the same colour whilst being dragging as it would when it is dropped.

GanttOptions: Cannot destructure property 'toggle' of '__vite_ssr_import_1__.getContext(...)' as it is undefined.

Hi

I am currently trying to create a first draft of a Gantt chart using this library. So far so good, but as soon as I want to include GanttOptions as well, the error message mentioned in the title comes up.
The message is triggered on the line: let { toggle, optionsStream } = getContext('options'); in GanttOptions.svelte. However, I have already checked everything several times and I can't find any error.
Does anyone know what the problem could be?

Thanks a lot

Mike

Handling for deselection of .sg-selected and .sg-hover

Right now I have some styles for these two classes, but when I hover off of the gantt or when I click on an already selected row, I would assume that both the hover style and the selected style would be toggled off, but they both remain on. (can provide video if needed)
Is it possible to implement these?

Local dev environment

Hey,

Let me begin with a big thank you for generously open-sourcing your hard work around Gantt charts. There are few free options available out there so really appreciate the efforts and the intention.

I tried running the demo/docs project but found the following console errors. There seems to be an issue around Svelte Routing.

I'm planning to consume, enhance, and contribute back to this project. Could you please let me know the steps / provide me with a document to set up the project for local development? I followed this but it seems it is not up to date https://github.com/ANovokmet/svelte-gantt#development-build.

Thanks in advance.

Manaday

Dev mode setup

Hello,
I would be glad to help on this project and on some of the issues since I'm having some of them too and using your gantt in my projects.
But I'm having a hard time making the dev mode work correctly since your big update.
Looks like the documentation is not accurate anymore and I don't know how to setup it the right way.
If you or anyone could give the proper way to setup the dev mode it would be awesome so I could do proper PR and help maintain this cool project :)

Thanks

lazy loading? moment.js settings probability?

This project is awesome. I love it so much.
I have some problem when I using this.

1. Does it have lazy loading support?
2. How can we set the moment.js settings?
   (ex. setting localization or which day of the week in year for global setting in gantt)

Read only mode

Is it possible to disable all events for tasks? I mean make some kind of read-only mode

Thank you

Default `svelte-gantt` has no styles applied to the tasks

It would be nice if they had some color by default. Noticed this in a new project.

Possibility to override/deactivate the onDateSelected method

Hello,
It would be nice to be able to override and/or deactivate the onDateSelected function launched with the on:click event in the ColumnHeaderRow component. My specific need being to change the headers units and/or the columnUnit after clicking on the ColumnHeader. Or at least deactivate the possibility to click on the headers so it won't mess with my layout (ie different units depending of the timescale used)

ColumnHeaderRow.svelte (rows 52 - 57)
{#each _headers as _header} <div class="column-header-cell" class:sticky={header.sticky} style="width:{_header.width}px" on:click="{() => dispatch('dateSelected', { from: _header.from, to: _header.to, unit: _header.unit })}"> <div class="column-header-cell-label">{_header.label || 'N/A'}</div> </div> {/each}

Gantt.svelte (rows 393 - 396)
function onDateSelected(event) { $_from = event.detail.from; $_to = event.detail.to; }

I can maybe try it and do a pull request if you don't have time to treat this. Since I need it for my projects, I'll implement it anyway locally otherwise.

Thank you for your time and you response

Expose more data manipulation functions from the Gantt

Gantt exposes updateTask that upserts a single task.

A function that updates multiple tasks would be useful, and a function that updates a row.
Also functions to get a row, get a task by id, get tasks by row id.

Originally posted by @mstsargin in #7 (comment)

RowModel Types

Hi! 👋

Firstly, thanks for your work on this project! 🙂

In my opinion the types I'm using seem to be working.
I'm not sure about the id. Afaik it can be a string too.

label is defined in the README but missing in the interface.
height works fine without providing it. So I will assume it's optional.

Aliyss

Here is the diff that solved my problem:

diff --git a/node_modules/svelte-gantt/types/core/row.d.ts b/node_modules/svelte-gantt/types/core/row.d.ts
index a2469e2..5e65ca3 100644
--- a/node_modules/svelte-gantt/types/core/row.d.ts
+++ b/node_modules/svelte-gantt/types/core/row.d.ts
@@ -1,9 +1,10 @@
 export interface RowModel {
-    id: number;
+    id: number | string;
+    label: string;
     classes?: string | string[];
     contentHtml?: string;
     enableDragging?: boolean;
-    height: number;
+    height?: number;
     /** Child rows in expandable tree */
     children?: RowModel[];
     /** Content of row header, html string */

Build issues

Hello, first of all thank you for your amazing gantt.

I have found some bugs related with your tools/build.js, but I can't create a pull request..

Greetings, Fábio

Draw the strokes like the column-header-cell instead of using background-image

Hello :)

Maybe it will be nice, if instead of using sg-columns svelte-1clwlpk with background-image, you draw one row with something like column-header-cell with height 100%. That will allow to style the strokes with css.

What you think?

Allow more styling options for columns

As #20 suggested, it would be good if columns could be styled with css. Much better for performance would be to still use background-image but allow columns to be styled using gantt options.

Maybe something like

    columnStrokeWidth: 1,
    columnStrokeColor: '#ccc',

Click the head time to enter the the details bug

After clicking the head time to enter the details, you can no longer return to the current view. You can only enter the later time details.
Step 1. Click '15.04.2022'

Step 2. Click the blank space in the box, can enter the details '16.04.2022'

Step 3. How can I return to '14.04.2022'?

.

Show modal form when mouse hover on gantt

I want to show when mouse hover a information modal form on a gantt chart item. How i can do it?

API won't return tasks that use a string as an id

I've been trying to use a string (uuid) instead of a number to identify my tasks and rows. This somehow seems to be broken though:
When using my test data as shown below then the component will load and display everything as expected.
As soon as I try to access a task event via API (i.e. gantt.api.tasks.on.select) though, the callback is run but only receives an empty object instead of the task. When changing the ids to some numbers then everything works properly again.

I tried to look into your code but I am not familiar enough with javascript to figure out what the issue might be.

import { time } from '../utils';

export const data = {
    rows: [{
        id: "bda66280-7a1b-4c63-baaa-fcd59fda7628",
        label: "Petunia Mulliner"
    }],
    tasks: [{
        id: "d4a5e677-ac25-4266-879d-2694e861df07",
        resourceId: "bda66280-7a1b-4c63-baaa-fcd59fda7628",
        label: "LPCVD",
        "from": time("9:00"),
        "to": time("11:00"),
        classes: "orange"
    }],
    dependencies: []
}

Task bar drawing start position error

If the 'from' property is not set to the whole time, the starting position of the task bar is drawn incorrectly and will move forward.
The following figure is the official example. Draw the correct screenshot. The 'from' property value is '8:00'.

But if i change the 'from' property's value to '8:30', the starting position of the task bar is drawn incorrectly and will move forward.
The screenshot is as follows:

Using svelte-gantt in angular

I’m working on a small project of mine where I’m looking to use a time line calendar, I'm trying to use svelte-gantt in my angular project, I didn’t find any example for implement this in angular.

I tried using this example but I got this error :
"TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?"

here is my component.ts

`
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import * as moment from 'moment';
import { SvelteGantt } from 'svelte-gantt';

@component({
selector: 'app-root',
template: '<div #ganttElement style="height: 100%; width: 100%;">'

})
export class AppComponent implements AfterViewInit {

/* here where the error shows */
gantt: SvelteGantt; // TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?

@ViewChild('ganttElement', {static: false}) ganttElement: ElementRef;

ngAfterViewInit() {
this.gantt = new SvelteGantt({
// target a DOM element
target: this.ganttElement.nativeElement,
// svelte-gantt options
props: {
tasks: [],
rows: [],
from: moment().startOf('week'),
to: moment().endOf('week')
}
});

}
}
`

timeRange classes not working

Nice work on the chart!
But I dont seem to be able to add classes to the timeRanges
It works for the tasks

timeRanges: [
      {
        id: 1,
        from: Date.parse("2022-05-16T12:25"),
        to: Date.parse("2022-05-16T12:50"),
        classes: "green",
        label: "test",
      },
      {
        id: 2,
        from: Date.parse("2022-05-16T14:25"),
        to: Date.parse("2022-05-16T14:50"),
        classes: ["currentTime"],
        label: "test2",
      },
    ]

version "4.0.3-beta"

DependencyModel - stroke and strokeWidth property is not working as mentioned in document

In my project I have integrated the dependency module of gantt chart. But what I observe stroke and strokeWidth property is not working as mentioned in document. Is this a open issue or something I am missing.

Do you please share any demo having dependency module integrated with mentioned properties.

I have created the dependency array in below way.

const objDependacy = {
id: new Date().valueOf(),
fromId: '#componentFromId#'
toId: '#componentToId#',
stroke: 'black',
strokeWidth: 15,
arrowSize: 1,
};
this.dependancies.push(objDependacy);`

Task background-color

Hello,
I'm currently trying to learn about initiate the svelte-gantt.
and I try to create a copy from the example that you have in /demo/src/route/tree.svelte and just do exactly the same configuration for the options, especially for tasks.

.

It is set as "orange" on classes for example of the first three task example.

But I'm still got the default task background-color for that which is blue

Anything else that need to be configured to get the "orange" task background-color just like the example?

thank you for your time.

Height auto

This is how gantt stays if we don't set the height.

I could put height auto, simply using:

.sg-timeline-body { flex: 0 1 auto !important; }

Maybe should be something to include by default, or maybe using an optional prop.

Implement date handling as an adapter

Currently, svelte-gantt has a dependency on momentjs. We would like for that to be extendable with other date libraries.

Header is not fixed after set sticky to true

I added gantt option like image bellow:

but the header is not fixed, so does I need set other property?

Task selected class

Whenever a task is clicked on or dragged/moved, the following CSS class always stays: .sg-task.selected.svelte-19txnoa. It would be good if and when the user clicks out somewhere else on the page (not necessarily on another task - anywhere on the page really), for the selected class to be removed from the task. I think this may require some event listener (but not exactly sure).

[Suggestion] Extend features of table (filter, group, sort, ...)

Hey guys, wouldnt it be nice to have extend table features (e.g. group by column/filter/sorting/...)?

I found this example for grouping, to show the feature (it would be awesome to have reflections on the parent of each dynamic group):
https://svelte.dev/repl/8e810d253d4e4d86a41a6ff02729c6b6?version=3.48.0

'Header Less Table' (used in the REPL) seems to be discontinued for 'Tanstack Table'.

Looking at this, layout of rows doesnt seem so different from rowStore used in 'Svelte Gantt' (https://tanstack.com/table/v8/docs/api/core/row). Maybe they are willing to include missing row properties like Y-Positions and AllParents.

Any thoughts?

Week view is not display fitWidth

Hello,
I can't show the weekly view in a compressed form, but the gantt looked like that in old versions. In the new version, when I click on the bar above the dates, it switches to that view. How can I get that fixed view to come?

Can svelte-gantt be used in SSR?

Right now svelte-gantt is used in onMount only for client-side rendering, is it possible for it to render server side as well and not rely on document?

Property 'tasks' does not exists on type 'GanttApi'

if (this.chart) this.chart.api.tasks.select((task) => console.log());

I am trying to register a select event and do some logic there but getting this issue.

Source code for the demo project

Maybe I'm not able to find it, but can someone give me the source code for this.'

https://anovokmet.github.io/svelte-gantt/#/tree

Trying to get this to run in SvelteKit hasn't been fun -_-

Sapper import issue

When trying to use with sapper I'm getting the following error.

\node_modules\svelte-gantt\index.js:1
import moment, { duration } from 'moment';
^^^^^^

SyntaxError: Cannot use import statement outside a module

strange behavior with timeRanges

Hi,
I pass several timeRanges to the gantt:

The gantt first loads the timeRanges:

When I change the day, a timeRange is still there, even if it was the day before:

I would have expected the timeRanges to only be there on the defined days.

Thank you.

Time Ranges Resize and Time Range Lable box Click event

Hello,

is there any way I can generate time ranges resize event and get time range object with resize time, also time range label box click event and get time range object

I've try but no success

Please help me out

Thanks in advance

Scrolling from left to right of the Gantt chart

I want to be able to scroll from left to right for example from 00:00 from today to 00:00 of tomorrow without displaying all hours all at once. I am aware I can set the currentEnd...but that will mean all hours from 00:00 to next day 00:00 are displayed in one go. Instead scrolling would be good. How could I do that please?

Cannot read properties of undefined (reading 'height')

Hey
Thank you for the generous open-source, i am getting the following error while i try to add task from API using updateTasks method.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'height') which leads to getHeight(model) { return this.row(model.resourceId).height - 2 * this.rowPadding; } yes i have mapped children array id to resourceId, thank you

How can we show start time and stop time in task gantt?

How can we show start time and stop time in task gantt?

Originally posted by @mstsargin in #6 (comment)

rowHeight can't update

window.onresize, use gantt.$set({rowHeight: 50}), unchanged

Styles are missing when using in ES6 import

Whenn i follow the way to import ES6 style in my App.svelte file:

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

It works, but most of the styles for the tasks are missing.
Shouldn't they be also included when I'm having tasks in the Gannt or do I really have to include them directly from node_modules my self?

React / Vanilla JS question

Love this gantt chart, it's awesome, thanks for all your work and under the MIT license.

My issue is I need it in React. I see a few options:

• fork it, rip out svelte stuff and replace with JSX
• collaborate with you making it React compatible
• collaborate with you making it vanilla JS, that way anyone (React / Vue / Svelte) can import it.

Curious to hear your thoughts on this.

Cannot have duplicate keys in a keyed each

Hello,
I am reading machine and task data from database. I have 25 machine, 40 task records in my database. I am getting this error after 27th task. I don't get an error when I change my query to get first 26 tasks. What could cause the problem?
I write console.log command in index.js function validate_each_keys. Get error when double undefined records.

Dependency error with moment.js

$ npm run dev

> [email protected] dev
> svelte-kit dev

Pre-bundling dependencies:
  svelte/store
  svelte
  svelte-gantt
  svelte/animate
  svelte/easing
  (...and 3 more)
(this will be run only when your dependencies or config have changed)
 > node_modules/svelte-gantt/index.js:1:17: error: No matching export in "node_modules/moment/src/moment.js" for import "duration"
    1 │ import moment, { duration } from 'moment';
      ╵                  ~~~~~~~~

> Build failed with 1 error:
node_modules/svelte-gantt/index.js:1:17: error: No matching export in "node_modules/moment/src/moment.js" for import "duration"
Error: Build failed with 1 error:
node_modules/svelte-gantt/index.js:1:17: error: No matching export in "node_modules/moment/src/moment.js" for import "duration"
    at failureErrorWithLog (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1493:15)
    at /home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1149:7)
    at /home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1258:14
    at /home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:400:28)
    at Socket.emit (domain.js:475:12)

With my package.json:

{
  "name": "RoomIt",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/kit": "next",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.34.0"
  },
  "type": "module",
  "dependencies": {
    "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
    "cookie": "^0.4.1",
    "svelte-gantt": "^3.0.4-beta"
  }
}

Drag and Drop Issue

Hello

I'm working on Angular@12 and [email protected]

I face one issue when drag and drop new task,
when week view selected and drop new task at last week day then new task not plot exact drop time (position) instead plot few hours early.

also plot working fine starting week days, when you drop new task incremental day then it plot few hours ago and increase plot hours.

please check below example

https://stackblitz.com/edit/angular-ivy-sm719e

Thanks in advance

Dependencies module

Cool library thanks!
Is the dependencies module currently wired up? I followed the code as best I could but couldn't see how to get it going.

NPM package?

Hey, really nice library. It is hard to find Gantt charts with permissive licenses.

Any thoughts on publishing an NPM package? I think it'd really help adoption.

version 4.0.3-beta generate two October

Why the header was rendered for two october?

Migrate svelte components to typescript

Currently svelte components are in svelte with js syntax.
Its not too hard porting components to typescript.

See https://github.com/sveltejs/template/blob/master/scripts/setupTypeScript.js
It includes replacing script tags with <script lang="ts">, installing new dependencies and updating rollup.config.js.

Add an option that prevents tasks to overlap

Maybe it will be nice to have an optional prop, for when a task is dragged, move the overlapped task forward or backward.