svelte-gantt

Gantt component made with svelte. The main reason is to provide an easy and very customazible component.
Overriding the default getHeader and getSlices methods it is possible to format your Gantt chart the way you need. By default it has four renderings modes: hour, day, month and year.
Also almost every element has it's own class and it is made this way to be easy to change the layout the way you need it.

PS1: this component does not use virtual rendering, this means that it will render every cell on load. Be careful with the matrix size you are generating ((endTime - startTime) / zoom).

PS2: events: there are only two, load (will be triggered after the component is loaded and painted) and click (will be fired when click on elements like header, cell, sideMenu, this can be checked on the event property: type).

npm install @fabiohvp/svelte-gantt
or
yarn add @fabiohvp/svelte-gantt

Example

some variables for both examples
``
const zoom = "day";
const padding = 365; //2 years using zoom = "day"
const today = new Date();
const rows = getRows(); //generated dummy data

let startTime = utils.addDays(today, -padding);
startTime = startTime.getTime();

let endTime = utils.addDays(today, padding);
endTime = endTime.getTime();
`

using svelte
`
import Gantt from "@fabiohvp/svelte-gantt";
console.log("loaded")} />
`
or as exported js component
`

const gantt = new Gantt({
target: document.getElementById("test"),
props: {
startTime,
endTime,
rows,
zoom,
//scrollBehavior: "smooth"
//slider: document.getElementById("wrapper")
},
});

gantt.$on("click", console.log);
gantt.$on("load", () => {
gantt.goto(initialDate, "smooth");

//coloring the column
const relativeDate = gantt.getRelativeDate(initialDate);
const slices = document.querySelectorAll(.slice[starttime="${relativeDate}"]);
Array.from(slices).slice(1).forEach(s => s.classList.add("goto"));
});

function getRows() {
return [{
"headers":[
{
"title":"Row 0",
"content":" Row 0"
}
],
"items":[
{
"content":"Item 0: 0",
"title":"Item 0: 0",
"class":"odd",
"startTime":"2019-09-15T10:00:00.000Z",
"endTime":"2019-12-13T17:00:00.000Z"
},
{
"content":"Item 0: 1",
"title":"Item 0: 1",
"class":"odd",
"startTime":"2020-02-12T08:00:00.000Z",
"endTime":"2020-08-28T14:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 1",
"content":" Row 1"
}
],
"items":[
{
"content":"Item 1: 0",
"title":"Item 1: 0",
"class":"even",
"startTime":"2020-10-09T04:00:00.000Z",
"endTime":"2020-11-25T06:00:00.000Z"
}
],
"expanded":false,
"children":[
{
"headers":[
{
"title":"Row 1-0",
"content":"   Row 1-0"
}
],
"items":[
{
"content":"Item 1-0: 0",
"title":"Item 1-0: 0",
"class":"odd",
"startTime":"2021-01-18T05:00:00.000Z",
"endTime":"2021-02-04T12:00:00.000Z"
},
{
"content":"Item 1-0: 1",
"title":"Item 1-0: 1",
"class":"odd",
"startTime":"2020-02-07T15:00:00.000Z",
"endTime":"2020-09-19T18:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 1-1",
"content":"   Row 1-1"
}
],
"items":[
{
"content":"Item 1-1: 0",
"title":"Item 1-1: 0",
"class":"odd",
"startTime":"2019-11-10T05:00:00.000Z",
"endTime":"2021-04-02T12:00:00.000Z"
}
],
"expanded":false,
"children":[
{
"headers":[
{
"title":"Row 1-1-0",
"content":"     Row 1-1-0"
}
],
"items":[
{
"content":"Item 1-1-0: 0",
"title":"Item 1-1-0: 0",
"class":"odd",
"startTime":"2019-12-22T05:00:00.000Z",
"endTime":"2020-10-15T12:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 1-1-1",
"content":"     Row 1-1-1"
}
],
"items":[
{
"content":"Item 1-1-1: 0",
"title":"Item 1-1-1: 0",
"class":"odd",
"startTime":"2019-09-08T10:00:00.000Z",
"endTime":"2021-06-14T06:00:00.000Z"
},
{
"content":"Item 1-1-1: 1",
"title":"Item 1-1-1: 1",
"class":"odd",
"startTime":"2020-06-17T15:00:00.000Z",
"endTime":"2020-10-04T17:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 1-1-2",
"content":"     Row 1-1-2"
}
],
"items":[
{
"content":"Item 1-1-2: 0",
"title":"Item 1-1-2: 0",
"class":"odd",
"startTime":"2021-05-17T03:00:00.000Z",
"endTime":"2021-07-16T04:00:00.000Z"
}
],
"expanded":false,
"children":[

]
}
]
},
{
"headers":[
{
"title":"Row 1-2",
"content":"   Row 1-2"
}
],
"items":[
{
"content":"Item 1-2: 0",
"title":"Item 1-2: 0",
"class":"odd",
"startTime":"2021-05-01T21:00:00.000Z",
"endTime":"2021-07-10T10:00:00.000Z"
}
],
"expanded":false,
"children":[

]
}
]
},
{
"headers":[
{
"title":"Row 2",
"content":" Row 2"
}
],
"items":[
{
"content":"Item 2: 0",
"title":"Item 2: 0",
"class":"odd",
"startTime":"2020-09-30T01:00:00.000Z",
"endTime":"2021-04-29T15:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 3",
"content":" Row 3"
}
],
"items":[
{
"content":"Item 3: 0",
"title":"Item 3: 0",
"class":"even",
"startTime":"2020-12-27T02:00:00.000Z",
"endTime":"2021-01-01T02:00:00.000Z"
}
],
"expanded":false,
"children":[
{
"headers":[
{
"title":"Row 3-0",
"content":"   Row 3-0"
}
],
"items":[
{
"content":"Item 3-0: 0",
"title":"Item 3-0: 0",
"class":"odd",
"startTime":"2019-08-21T16:00:00.000Z",
"endTime":"2021-04-30T18:00:00.000Z"
},
{
"content":"Item 3-0: 1",
"title":"Item 3-0: 1",
"class":"odd",
"startTime":"2021-02-05T13:00:00.000Z",
"endTime":"2021-03-13T19:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 3-1",
"content":"   Row 3-1"
}
],
"items":[
{
"content":"Item 3-1: 0",
"title":"Item 3-1: 0",
"class":"odd",
"startTime":"2021-02-11T18:00:00.000Z",
"endTime":"2021-02-12T21:00:00.000Z"
}
],
"expanded":false,
"children":[
{
"headers":[
{
"title":"Row 3-1-0",
"content":"     Row 3-1-0"
}
],
"items":[
{
"content":"Item 3-1-0: 0",
"title":"Item 3-1-0: 0",
"class":"odd",
"startTime":"2019-12-18T17:00:00.000Z",
"endTime":"2020-07-30T15:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 3-1-1",
"content":"     Row 3-1-1"
}
],
"items":[
{
"content":"Item 3-1-1: 0",
"title":"Item 3-1-1: 0",
"class":"odd",
"startTime":"2021-05-31T08:00:00.000Z",
"endTime":"2021-06-05T00:00:00.000Z"
}
],
"expanded":false,
"children":[

]
},
{
"headers":[
{
"title":"Row 3-1-2",
"content":"     Row 3-1-2"
}
],
"items":[
{
"content":"Item 3-1-2: 0",
"title":"Item 3-1-2: 0",
"class":"odd",
"startTime":"2021-03-27T14:00:00.000Z",
"endTime":"2021-06-25T09:00:00.000Z"
},
{
"content":"Item 3-1-2: 1",
"title":"Item 3-1-2: 1",
"class":"odd",
"startTime":"2020-11-28T16:00:00.000Z",
"endTime":"2021-04-25T14:00:00.000Z"
}
],
"expanded":false,
"children":[

]
}
]
},
{
"headers":[
{
"title":"Row 3-2",
"content":"   Row 3-2"
}
],
"items":[
{
"content":"Item 3-2: 0",
"title":"Item 3-2: 0",
"class":"odd",
"startTime":"2020-09-24T21:00:00.000Z",
"endTime":"2021-07-15T17:00:00.000Z"
}
],
"expanded":false,
"children":[

]
}
]
},
{
"headers":[
{
"title":"Row 4",
"content":" Row 4"
}
],
"items":[
{
"content":"Item 4: 0",
"title":"Item 4: 0",
"class":"odd",
"startTime":"2020-10-27T00:00:00.000Z",
"endTime":"2021-07-11T06:00:00.000Z"
},
{
"content":"Item 4: 1",
"title":"Item 4: 1",
"class":"odd",
"startTime":"2020-02-16T00:00:00.000Z",
"endTime":"2020-04-27T03:00:00.000Z"
}
],
"expanded":false,
"children":[

]
}];
}
``