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). ================================================ FILE: docs/.nojekyll ================================================ ================================================ FILE: docs/404.html ================================================
enableCreateTask (boolean) - Set to true to enable task creation.onCreateTask (Function) - Triggers at the moment when a new task has started being dragged. It should return the new tasks model.onCreatedTask (Function) - Triggers after task has been successfully created.import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';
// ...
let id = 0;
gantt.$set({
enableCreateTask: true,
onCreateTask: (data) => {
id++;
return {
id: id,
label: `New task ${id}`,
...data
};
},
onCreatedTask: (task) => {
console.log('task created', task);
}
});`,x;return d=new aa({}),{c(){a=f("h1"),a.innerHTML=s,o=_(),p=f("p"),p.textContent=n,l=_(),e=f("ul"),e.innerHTML=k,v=_(),H(d.$$.fragment),$=_(),C=f("hr"),T=_(),m=f("pre"),y=new W(!1),this.h()},l(t){a=g(t,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),w(a)!=="svelte-98k718"&&(a.innerHTML=s),o=h(t),p=g(t,"P",{"data-svelte-h":!0}),w(p)!=="svelte-2i3m6l"&&(p.textContent=n),l=h(t),e=g(t,"UL",{"data-svelte-h":!0}),w(e)!=="svelte-vobacb"&&(e.innerHTML=k),v=h(t),S(d.$$.fragment,t),$=h(t),C=g(t,"HR",{}),T=h(t),m=g(t,"PRE",{class:!0});var r=F(m);y=q(r,!1),r.forEach(c),this.h()},h(){b(a,"id","create-tasks"),b(a,"tabindex","-1"),y.a=null,b(m,"class","language-js")},m(t,r){u(t,a,r),u(t,o,r),u(t,p,r),u(t,l,r),u(t,e,r),u(t,v,r),L(d,t,r),u(t,$,r),u(t,C,r),u(t,T,r),u(t,m,r),y.m(V,m),x=!0},p:N,i(t){x||(G(d.$$.fragment,t),x=!0)},o(t){j(d.$$.fragment,t),x=!1},d(t){t&&(c(a),c(o),c(p),c(l),c(e),c(v),c($),c(C),c(T),c(m)),E(d,t)}}}function na(i){let a,s;const o=[i[0]];let p={$$slots:{default:[ta]},$$scope:{ctx:i}};for(let n=0;nSvelteGanttDependencies module:",r,l,b,j=`import { SvelteGanttDependencies } from 'svelte-gantt';
gantt.$set({
dependencies: [
{
id: 1,
fromId: 1,
toId: 2
}
],
ganttBodyModules: [SvelteGanttDependencies]
});`,x,i,$="Gantt props:",L,u,M='dependenciesobject[]idnumber | stringfromIdnumber | stringtoIdnumber | stringstrokestring'red' or '#ff0000'strokeWidthnumberarrowSizenumbernew 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;
}
}
);`,u,k,w,f,x;return f=new pn({}),{c(){n=h("h1"),n.innerHTML=t,a=v(),l=h("p"),l.textContent=s,p=v(),c=h("pre"),i=new q(!1),u=v(),k=h("hr"),w=v(),T(f.$$.fragment),this.h()},l(e){n=b(e,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),D(n)!=="svelte-17nt48i"&&(n.innerHTML=t),a=y(e),l=b(e,"P",{"data-svelte-h":!0}),D(l)!=="svelte-9075e2"&&(l.textContent=s),p=y(e),c=b(e,"PRE",{class:!0});var m=C(c);i=X(m,!1),m.forEach(d),u=y(e),k=b(e,"HR",{}),w=y(e),H(f.$$.fragment,e),this.h()},h(){_(n,"id","external-draggable"),_(n,"tabindex","-1"),i.a=null,_(c,"class","language-js")},m(e,m){g(e,n,m),g(e,a,m),g(e,l,m),g(e,p,m),g(e,c,m),i.m(r,c),g(e,u,m),g(e,k,m),g(e,w,m),M(f,e,m),x=!0},p:Y,i(e){x||(S(f.$$.fragment,e),x=!0)},o(e){j(f.$$.fragment,e),x=!1},d(e){e&&(d(n),d(a),d(l),d(p),d(c),d(u),d(k),d(w)),L(f,e)}}}function cn(o){let n,t;const a=[o[0]];let l={$$slots:{default:[ln]},$$scope:{ctx:o}};for(let s=0;stitle (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.import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';
// ...
gantt.$set({
tableHeaders: [
{ title: 'Name', property: 'label', width: 150 },
{ title: 'Age', property: 'age', width: 50 },
],
ganttTableModules: [SvelteGanttTable],
});`,S;return _=new nt({}),{c(){e=d("h1"),e.innerHTML=l,o=h(),n=d("p"),n.textContent=a,i=h(),c=d("h2"),c.innerHTML=z,$=h(),f=d("p"),f.textContent=A,x=h(),k=d("ul"),k.innerHTML=D,T=h(),R(_.$$.fragment),w=h(),H=d("hr"),C=h(),b=d("pre"),L=new Q(!1),this.h()},l(t){e=m(t,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),v(e)!=="svelte-3iqkg0"&&(e.innerHTML=l),o=g(t),n=m(t,"P",{"data-svelte-h":!0}),v(n)!=="svelte-1w7o6c1"&&(n.textContent=a),i=g(t),c=m(t,"H2",{id:!0,tabindex:!0,"data-svelte-h":!0}),v(c)!=="svelte-pfl7on"&&(c.innerHTML=z),$=g(t),f=m(t,"P",{"data-svelte-h":!0}),v(f)!=="svelte-1khqzyf"&&(f.textContent=A),x=g(t),k=m(t,"UL",{"data-svelte-h":!0}),v(k)!=="svelte-5ju2yx"&&(k.innerHTML=D),T=g(t),G(_.$$.fragment,t),w=g(t),H=m(t,"HR",{}),C=g(t),b=m(t,"PRE",{class:!0});var s=B(b);L=X(s,!1),s.forEach(p),this.h()},h(){y(e,"id","table"),y(e,"tabindex","-1"),y(c,"id","table-header"),y(c,"tabindex","-1"),L.a=null,y(b,"class","language-js")},m(t,s){r(t,e,s),r(t,o,s),r(t,n,s),r(t,i,s),r(t,c,s),r(t,$,s),r(t,f,s),r(t,x,s),r(t,k,s),r(t,T,s),P(_,t,s),r(t,w,s),r(t,H,s),r(t,C,s),r(t,b,s),L.m(O,b),S=!0},p:F,i(t){S||(j(_.$$.fragment,t),S=!0)},o(t){E(_.$$.fragment,t),S=!1},d(t){t&&(p(e),p(o),p(n),p(i),p(c),p($),p(f),p(x),p(k),p(T),p(w),p(H),p(C),p(b)),q(_,t)}}}function lt(u){let e,l;const o=[u[0],V];let n={$$slots:{default:[st]},$$scope:{ctx:u}};for(let a=0;acolumnUnit: 'minute', columnOffset: 15 will create a column for every 15 minutes.",r,a,C='Highlighted durations',y,u,M="Highlight a repeating block of time spanning all rows:",H,h,$='unitstring'day'.fractionsnumber[]{unit: 'day', fractions: [0,6]} will highlight weekends.useCanvasColumns is set to false, and if highlighted unit is the same or a constant fraction of the column unit eg. day, hour, minute.";return{c(){t=_("h1"),t.innerHTML=c,d=v(),i=_("p"),i.innerHTML=n,r=v(),a=_("h2"),a.innerHTML=C,y=v(),u=_("p"),u.textContent=M,H=v(),h=_("table"),h.innerHTML=$,b=v(),m=_("p"),m.innerHTML=w,this.h()},l(e){t=g(e,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),p(t)!=="svelte-5lxwj9"&&(t.innerHTML=c),d=x(e),i=g(e,"P",{"data-svelte-h":!0}),p(i)!=="svelte-gb53n8"&&(i.innerHTML=n),r=x(e),a=g(e,"H2",{id:!0,tabindex:!0,"data-svelte-h":!0}),p(a)!=="svelte-lakx3g"&&(a.innerHTML=C),y=x(e),u=g(e,"P",{"data-svelte-h":!0}),p(u)!=="svelte-ndc96x"&&(u.textContent=M),H=x(e),h=g(e,"TABLE",{"data-svelte-h":!0}),p(h)!=="svelte-1v1kn7x"&&(h.innerHTML=$),b=x(e),m=g(e,"P",{"data-svelte-h":!0}),p(m)!=="svelte-j4s1nm"&&(m.innerHTML=w),this.h()},h(){L(t,"id","columns"),L(t,"tabindex","-1"),L(a,"id","highlighted-durations"),L(a,"tabindex","-1")},m(e,l){o(e,t,l),o(e,d,l),o(e,i,l),o(e,r,l),o(e,a,l),o(e,y,l),o(e,u,l),o(e,H,l),o(e,h,l),o(e,b,l),o(e,m,l)},p:j,d(e){e&&(s(t),s(d),s(i),s(r),s(a),s(y),s(u),s(H),s(h),s(b),s(m))}}}function I(f){let t,c;const d=[f[0]];let i={$$slots:{default:[G]},$$scope:{ctx:f}};for(let n=0;nprops to the SvelteGantt constructor.",R,D,_e,Ha=`const gantt = new SvelteGantt({
target: document.getElementById('example-gantt'),
props: {
// ...
}
});`,ke,K,od="To update use $set, eg.",He,Q,Me,Ma=`gantt.$set({
// ...
});`,Le,z,$t,sd='rowsArraytasksArraytimeRangesArraydependenciesArrayfromMomenttoMomentminWidthnumberfitWidthbooleanhighlightedDurations",an,Pt,Td="Object",on,V,sn,B,ln,rn,Z,vd="undefined",cn,qt,md='highlightColorstringhighlightedDurations).magnetUnitstringmagnetOffsetnumbercolumnUnit",fn,Ot,Md="string",gn,tt,Tn,O,vn,mn,et,Ld="‘minute’",_n,x,Ut,xd="columnOffset",kn,Wt,bd="number",Hn,nt,Mn,U,Ln,xn,dt,$d="15",bn,It,Cd='headersArraydateAdapter",Cn,Ft,yd="Object",wn,Te,W,yn,at,Rd="undefined",Rn,Xt,Dd='zoomLevelsArrayrowHeightnumberrowPaddingnumberganttTableModulesArray[SvelteGanttTable]ganttBodyModulesArray[SvelteGanttDependencies]reflectOnParentRowsbooleanreflectOnChildRowsbooleanclassesstring|ArrayresizeHandleWidthnumberonTaskButtonClick(task: Task) => voidtaskContent(task: Task) => stringtaskElementHook",Un,oe,Wd="Function",Wn,ve,I,In,ot,Id="undefined",Nn,se,Nd='tableWidthnumbertableHeadersArraycolumnStrokeColorstring'#efefef'columnStrokeWidthnumberlayout",Kn,ue,Kd="'overlap', 'pack', 'expand'",Qn,st,Vn,N,Zn,td,lt,Qd="undefined",ed,pe,Vd='enableCreateTaskbooleanonCreateTask({ from: number; to: number; resourceId: string number; }) => TaskModelonCreatedTask(task: SvelteTask) => void(task) => `<div>Task ${task.model.label}</div>`',we,E,da='Layout',ye,ct,aa="Layout can be one of the following:",Re,ut,oa="'overlap' Overlapping tasks display one over another (default).'pack' Overlapping tasks shrink and display one above another.'expand' Overlapping tasks display one above another and make the row expand.{ format(date: number, format: string): string; } that formats a date in UNIX miliseconds to a string using the specified format template, eg. ‘MMMM Do’.",Ee,A,ra='Methods',Se,ht,ia='selectTask(id)idnumber|stringunselectTasks()scrollToTask(id, scrollBehavior)idnumber|stringscrollBehaviourstringauto or smooth.scrollToRow(id, scrollBehavior)idnumber|stringscrollBehaviourstringauto or smooth.updateTask(model)modelTaskupdateTasks(models)modelsArray<Task>updateRow(model)modelRowupdateRows(models)modelsArray<Row>getTask(id)idnumberstringgetRow(id)idnumberstringgetTasks(rowId)rowIdnumberstringgantt.api.tasks.on.select(task => console.log('Listener: task selected', task));`,ze,q,pa='gantt.api.tasks',Be,Tt,ha="movetask]switchRowtask, row, previousRow]selecttask]moveEndtask]changetask]changedtask]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:unitstring'day' will create a cell in the header for each day in the timeline.formatstring'DD.MM.YYYY', 'HH'offsetnumberstickybooleansvelte-gantt is only able to format a small set of date templates, eg. 'HH:mm'. For more you can use MomentSvelteGanttDateAdapter as dateAdapter:",M,k,T,z=`import { MomentSvelteGanttDateAdapter } from 'svelte-gantt';
import moment from 'Moment';
const options = {
dateAdapter: new MomentSvelteGanttDateAdapter(moment)
// ...
}`,L,h,E="…or a custom one, as long as it implements the interface { format(date: number, format: string): string; }.",j,_,C,N=`import dayjs from 'dayjs';
const options = {
dateAdapter: {
format(date, format) {
return dayjs(date).format(format);
}
},
// ...
}`;return{c(){e=u("h1"),e.innerHTML=d,c=g(),p=u("p"),p.textContent=a,l=g(),r=u("table"),r.innerHTML=$,x=g(),i=u("h3"),i.innerHTML=A,b=g(),f=u("p"),f.innerHTML=P,M=g(),k=u("pre"),T=new G(!1),L=g(),h=u("p"),h.innerHTML=E,j=g(),_=u("pre"),C=new G(!1),this.h()},l(t){e=m(t,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),H(e)!=="svelte-1qag11n"&&(e.innerHTML=d),c=y(t),p=m(t,"P",{"data-svelte-h":!0}),H(p)!=="svelte-1k5mmo7"&&(p.textContent=a),l=y(t),r=m(t,"TABLE",{"data-svelte-h":!0}),H(r)!=="svelte-8jxepk"&&(r.innerHTML=$),x=y(t),i=m(t,"H3",{id:!0,tabindex:!0,"data-svelte-h":!0}),H(i)!=="svelte-1pliyh9"&&(i.innerHTML=A),b=y(t),f=m(t,"P",{"data-svelte-h":!0}),H(f)!=="svelte-fgg87n"&&(f.innerHTML=P),M=y(t),k=m(t,"PRE",{class:!0});var n=R(k);T=q(n,!1),n.forEach(s),L=y(t),h=m(t,"P",{"data-svelte-h":!0}),H(h)!=="svelte-105sdm8"&&(h.innerHTML=E),j=y(t),_=m(t,"PRE",{class:!0});var S=R(_);C=q(S,!1),S.forEach(s),this.h()},h(){w(e,"id","header"),w(e,"tabindex","-1"),w(i,"id","formatting"),w(i,"tabindex","-1"),T.a=null,w(k,"class","language-js"),C.a=null,w(_,"class","language-js")},m(t,n){o(t,e,n),o(t,c,n),o(t,p,n),o(t,l,n),o(t,r,n),o(t,x,n),o(t,i,n),o(t,b,n),o(t,f,n),o(t,M,n),o(t,k,n),T.m(z,k),o(t,L,n),o(t,h,n),o(t,j,n),o(t,_,n),C.m(N,_)},p:I,d(t){t&&(s(e),s(c),s(p),s(l),s(r),s(x),s(i),s(b),s(f),s(M),s(k),s(L),s(h),s(j),s(_))}}}function nt(v){let e,d;const c=[v[0],F];let p={$$slots:{default:[at]},$$scope:{ctx:v}};for(let a=0;alayout:",l,c,d,m,v,_=N(i[1]),r=[];for(let t=0;t<_.length;t+=1)r[t]=q(V(i,_,t));return m=new Z({props:{from:p("8:00"),to:p("14:00"),layout:i[0],rows:[{id:1,label:"Resource #1"},{id:2,label:"Resource #2"},{id:3,label:"Resource #3"},{id:4,label:"Resource #4"}],tasks:[{id:1,resourceId:1,from:p("8:00"),to:p("10:00"),label:"Default",classes:"blue"},{id:2,resourceId:1,from:p("9:00"),to:p("11:00"),label:"Default",classes:"orange"},{id:3,resourceId:1,from:p("9:30"),to:p("12:00"),label:"Default",classes:"violet"},{id:4,resourceId:2,from:p("9:00"),to:p("11:00"),label:"Default",classes:"blue"},{id:5,resourceId:2,from:p("9:30"),to:p("11:00"),label:"Default",classes:"orange"},{id:6,resourceId:2,from:p("11:00"),to:p("13:00"),label:"Default",classes:"violet"},{id:7,resourceId:3,from:p("9:00"),to:p("11:00"),label:"Default",classes:"blue"}],ganttTableModules:[ee]}}),{c(){e=$("div"),a=$("div"),s=$("span"),s.innerHTML=o,l=k();for(let t=0;tzoomLevels) can be provided. When using wheel + ctrl the options cycle.
Each of the levels can have the following fields:`,u,c,g='headersHeader[]minWidthnumberfitWidthbooleancolumnUnitstringcolumnOffsetnumbergantt.$set({
zoomLevels: [
{
headers: [{ unit: 'month', format: 'MMM YYYY' }],
minWidth: 800,
columnUnit: 'day',
columnOffset: 1
},
{
headers: [
{ unit: 'month', format: 'MMM YYYY' },
{ unit: 'week', format: '[week] w' },
{ unit: 'day', format: 'D' }
],
minWidth: 3200,
columnUnit: 'hour',
columnOffset: 4
},
{
headers: [
{ unit: 'day', format: 'MMM D, YYYY' },
{ unit: 'hour', format: 'HH' }
],
minWidth: 8000,
columnUnit: 'hour',
columnOffset: 2
},
{
headers: [
{ unit: 'day', format: 'MMM D, YYYY' },
{ unit: 'hour', format: 'HH' }
],
minWidth: 16000,
columnUnit: 'hour',
columnOffset: 2
},
{
headers: [
{ unit: 'day', format: 'MMM D, YYYY' },
{ unit: 'hour', format: 'HH' }
],
minWidth: 32000,
columnUnit: 'hour',
columnOffset: 2
}
]
})`,z;return k=new kn({}),{c(){n=v("h1"),n.innerHTML=a,p=M(),i=v("p"),i.innerHTML=e,u=M(),c=v("table"),c.innerHTML=g,h=M(),r=v("p"),r.textContent=l,s=M(),S(k.$$.fragment),d=M(),m=v("hr"),Y=M(),O=v("pre"),U=new nn(!1),this.h()},l(t){n=b(t,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),w(n)!=="svelte-1dh5bt9"&&(n.innerHTML=a),p=$(t),i=b(t,"P",{"data-svelte-h":!0}),w(i)!=="svelte-1a7tjii"&&(i.innerHTML=e),u=$(t),c=b(t,"TABLE",{"data-svelte-h":!0}),w(c)!=="svelte-7xkajw"&&(c.innerHTML=g),h=$(t),r=b(t,"P",{"data-svelte-h":!0}),w(r)!=="svelte-1s3x395"&&(r.textContent=l),s=$(t),T(k.$$.fragment,t),d=$(t),m=b(t,"HR",{}),Y=$(t),O=b(t,"PRE",{class:!0});var y=D(O);U=sn(y,!1),y.forEach(f),this.h()},h(){W(n,"id","zoom-level"),W(n,"tabindex","-1"),U.a=null,W(O,"class","language-js")},m(t,y){_(t,n,y),_(t,p,y),_(t,i,y),_(t,u,y),_(t,c,y),_(t,h,y),_(t,r,y),_(t,s,y),C(k,t,y),_(t,d,y),_(t,m,y),_(t,Y,y),_(t,O,y),U.m(F,O),z=!0},p:an,i(t){z||(E(k.$$.fragment,t),z=!0)},o(t){j(k.$$.fragment,t),z=!1},d(t){t&&(f(n),f(p),f(i),f(u),f(c),f(h),f(r),f(s),f(d),f(m),f(Y),f(O)),I(k,t)}}}function mn(o){let n,a;const p=[o[0]];let i={$$slots:{default:[dn]},$$scope:{ctx:o}};for(let e=0;eSvelte-gantt is a lightweight and fast interactive gantt chart/resource booking component made with Svelte. Compatible with React, Angular, Vue, Svelte... Zero dependencies.
idnumber | stringclassesstring | string[]contentHtmlstringenableDraggingbooleantruedraggablebooleantrueenableResizebooleantrueresizablebooleantruelabelstringheaderHtmlstringchildrenobject[]expandedbooleanheightnumber52row.children property. To show a button for expanding rows, set type: 'tree' to the table header.",R,w,E,Y=`gantt.$set({
tableHeaders={[ { title: 'Title', property: 'label', type: 'tree' } ]},
rows={[
{
id: 1,
label: 'Parent 1',
expanded: false,
children: [
{ id: 11, label: 'Child 1' },
{ id: 12, label: 'Child 2' }
]
},
{
id: 2,
label: 'Parent 2',
expanded: true,
children: [
{ id: 21, label: 'Child 1', children: [{ id: 211, label: 'Grandchild 1' }] },
{ id: 22, label: 'Child 2' },
{ id: 23, label: 'Child 3' }
]
},
{
id: 3,
label: 'No children'
},
]}
});
`,G,_,z;return y=new pt({}),_=new st({}),{c(){t=h("h1"),t.innerHTML=n,p=f(),s=h("p"),s.textContent=e,c=f(),o=h("table"),o.innerHTML=u,M=f(),$(y.$$.fragment),S=f(),k=h("h1"),k.innerHTML=B,P=f(),v=h("p"),v.innerHTML=W,R=f(),w=h("pre"),E=new Z(!1),G=f(),$(_.$$.fragment),this.h()},l(a){t=m(a,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),x(t)!=="svelte-m7yn88"&&(t.innerHTML=n),p=g(a),s=m(a,"P",{"data-svelte-h":!0}),x(s)!=="svelte-ah8mfk"&&(s.textContent=e),c=g(a),o=m(a,"TABLE",{"data-svelte-h":!0}),x(o)!=="svelte-6v2uat"&&(o.innerHTML=u),M=g(a),C(y.$$.fragment,a),S=g(a),k=m(a,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),x(k)!=="svelte-14pltb5"&&(k.innerHTML=B),P=g(a),v=m(a,"P",{"data-svelte-h":!0}),x(v)!=="svelte-skxylx"&&(v.innerHTML=W),R=g(a),w=m(a,"PRE",{class:!0});var l=N(w);E=tt(l,!1),l.forEach(r),G=g(a),C(_.$$.fragment,a),this.h()},h(){b(t,"id","row"),b(t,"tabindex","-1"),b(k,"id","collapsible-rows"),b(k,"tabindex","-1"),E.a=null,b(w,"class","language-js")},m(a,l){i(a,t,l),i(a,p,l),i(a,s,l),i(a,c,l),i(a,o,l),i(a,M,l),T(y,a,l),i(a,S,l),i(a,k,l),i(a,P,l),i(a,v,l),i(a,R,l),i(a,w,l),E.m(Y,w),i(a,G,l),T(_,a,l),z=!0},p:V,i(a){z||(H(y.$$.fragment,a),H(_.$$.fragment,a),z=!0)},o(a){L(y.$$.fragment,a),L(_.$$.fragment,a),z=!1},d(a){a&&(r(t),r(p),r(s),r(c),r(o),r(M),r(S),r(k),r(P),r(v),r(R),r(w),r(G)),j(y,a),j(_,a)}}}function rt(d){let t,n;const p=[d[0],O];let s={$$slots:{default:[lt]},$$scope:{ctx:d}};for(let e=0;eidnumber|stringresourceIdnumber`string`amountDonenumberclassesstring|ArrayfromnumbertonumberlabelstringhtmlstringshowButtonbooleanbuttonClassesstring|ArraybuttonHtmlstringdraggablebooleanenableDraggingbooleanresizablebooleanresizeEnabledbooleantaskElementHook to gantt.",Q,T,A,ht='taskElementHook",dt,P,_t="function",lt,F,H,it,D,vt="undefined",U,E,bt="Task element hook function is a svelte action, eg.",X,L,Z,It=`(node, task) => {
node.addEventListener('click', console.log);
return {
update(task) {
// ...
},
destroy() {
node.removeEventListener('click', console.log);
}
};
}`,tt,M,$t="This enables you to add custom behaviour and look to tasks. For example, displaying a popup on hover, or rendering Angular components within the task.",et,I,nt,x,xt='Milestones',at,z,Tt="TODO",st;return C=new Nt({}),H=new Bt({props:{href:"#taskelementhook",$$slots:{default:[Ft]},$$scope:{ctx:g}}}),I=new Vt({}),{c(){e=c("h1"),e.innerHTML=a,i=m(),n=c("p"),n.textContent=d,r=m(),k=c("table"),k.innerHTML=mt,Y=m(),S(C.$$.fragment),J=m(),$=c("h3"),$.innerHTML=ft,K=m(),w=c("p"),w.innerHTML=gt,Q=m(),T=c("table"),A=c("thead"),A.innerHTML=ht,ot=m(),V=c("tbody"),_=c("tr"),j=c("td"),j.innerHTML=kt,dt=m(),P=c("td"),P.innerHTML=_t,lt=m(),F=c("td"),S(H.$$.fragment),it=m(),D=c("td"),D.textContent=vt,U=m(),E=c("p"),E.textContent=bt,X=m(),L=c("pre"),Z=new zt(!1),tt=m(),M=c("p"),M.textContent=$t,et=m(),S(I.$$.fragment),nt=m(),x=c("h3"),x.innerHTML=xt,at=m(),z=c("p"),z.textContent=Tt,this.h()},l(t){e=u(t,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),h(e)!=="svelte-kalzzn"&&(e.innerHTML=a),i=f(t),n=u(t,"P",{"data-svelte-h":!0}),h(n)!=="svelte-9a8s4k"&&(n.textContent=d),r=f(t),k=u(t,"TABLE",{"data-svelte-h":!0}),h(k)!=="svelte-1jc588s"&&(k.innerHTML=mt),Y=f(t),B(C.$$.fragment,t),J=f(t),$=u(t,"H3",{id:!0,tabindex:!0,"data-svelte-h":!0}),h($)!=="svelte-1u5cwzo"&&($.innerHTML=ft),K=f(t),w=u(t,"P",{"data-svelte-h":!0}),h(w)!=="svelte-1ehsgat"&&(w.innerHTML=gt),Q=f(t),T=u(t,"TABLE",{});var s=R(T);A=u(s,"THEAD",{"data-svelte-h":!0}),h(A)!=="svelte-9d27rb"&&(A.innerHTML=ht),ot=f(s),V=u(s,"TBODY",{});var G=R(V);_=u(G,"TR",{});var y=R(_);j=u(y,"TD",{"data-svelte-h":!0}),h(j)!=="svelte-jd7ua1"&&(j.innerHTML=kt),dt=f(y),P=u(y,"TD",{"data-svelte-h":!0}),h(P)!=="svelte-4c6y6l"&&(P.innerHTML=_t),lt=f(y),F=u(y,"TD",{});var Ht=R(F);B(H.$$.fragment,Ht),Ht.forEach(o),it=f(y),D=u(y,"TD",{align:!0,"data-svelte-h":!0}),h(D)!=="svelte-19hhiyk"&&(D.textContent=vt),y.forEach(o),G.forEach(o),s.forEach(o),U=f(t),E=u(t,"P",{"data-svelte-h":!0}),h(E)!=="svelte-1wv2ef2"&&(E.textContent=bt),X=f(t),L=u(t,"PRE",{class:!0});var yt=R(L);Z=Rt(yt,!1),yt.forEach(o),tt=f(t),M=u(t,"P",{"data-svelte-h":!0}),h(M)!=="svelte-1nfuzj5"&&(M.textContent=$t),et=f(t),B(I.$$.fragment,t),nt=f(t),x=u(t,"H3",{id:!0,tabindex:!0,"data-svelte-h":!0}),h(x)!=="svelte-gavn3t"&&(x.innerHTML=xt),at=f(t),z=u(t,"P",{"data-svelte-h":!0}),h(z)!=="svelte-1yyqpus"&&(z.textContent=Tt),this.h()},h(){b(e,"id","task"),b(e,"tabindex","-1"),b($,"id","taskelementhook"),b($,"tabindex","-1"),b(D,"align","right"),Z.a=null,b(L,"class","language-js"),b(x,"id","milestones"),b(x,"tabindex","-1")},m(t,s){l(t,e,s),l(t,i,s),l(t,n,s),l(t,r,s),l(t,k,s),l(t,Y,s),q(C,t,s),l(t,J,s),l(t,$,s),l(t,K,s),l(t,w,s),l(t,Q,s),l(t,T,s),v(T,A),v(T,ot),v(T,V),v(V,_),v(_,j),v(_,dt),v(_,P),v(_,lt),v(_,F),q(H,F,null),v(_,it),v(_,D),l(t,U,s),l(t,E,s),l(t,X,s),l(t,L,s),Z.m(It,L),l(t,tt,s),l(t,M,s),l(t,et,s),q(I,t,s),l(t,nt,s),l(t,x,s),l(t,at,s),l(t,z,s),st=!0},p(t,s){const G={};s&2&&(G.$$scope={dirty:s,ctx:t}),H.$set(G)},i(t){st||(N(C.$$.fragment,t),N(H.$$.fragment,t),N(I.$$.fragment,t),st=!0)},o(t){W(C.$$.fragment,t),W(H.$$.fragment,t),W(I.$$.fragment,t),st=!1},d(t){t&&(o(e),o(i),o(n),o(r),o(k),o(Y),o(J),o($),o(K),o(w),o(Q),o(T),o(U),o(E),o(X),o(L),o(tt),o(M),o(et),o(nt),o(x),o(at),o(z)),O(C,t),O(H),O(I,t)}}}function Yt(g){let e,a;const i=[g[0],Et];let n={$$slots:{default:[Gt]},$$scope:{ctx:g}};for(let d=0;didnumber|stringfromnumbertonumberclassesstring|Arraylabelstringresizablebooleanconst options = {
// ...
timeRanges: [
{
id: 2,
from: new Date('2024-02-01T08:00:00').valueOf(),
to: new Date('2024-02-01T09:00:00').valueOf(),
label: 'Breakfast'
},
{
id: 1,
from: new Date('2024-02-01T10:00:00').valueOf(),
to: new Date('2024-02-01T11:00:00').valueOf(),
classes: 'time-range-lunch',
label: 'Lunch',
resizable: false,
},
{
id: 3,
from: new Date('2024-02-01T11:00:00').valueOf(),
to: new Date('2024-02-01T12:00:00').valueOf(),
label: 'Custom class',
classes: 'gradient',
}
]
}`,_,m,b;return m=new F({}),{c(){n=f("h1"),n.innerHTML=e,p=v(),t=f("p"),t.textContent=a,c=v(),r=f("table"),r.innerHTML=O,y=v(),k=f("pre"),h=new A(!1),_=v(),D(m.$$.fragment),this.h()},l(s){n=g(s,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),x(n)!=="svelte-snhjny"&&(n.innerHTML=e),p=$(s),t=g(s,"P",{"data-svelte-h":!0}),x(t)!=="svelte-1ikt61s"&&(t.textContent=a),c=$(s),r=g(s,"TABLE",{"data-svelte-h":!0}),x(r)!=="svelte-1j6yvtm"&&(r.innerHTML=O),y=$(s),k=g(s,"PRE",{class:!0});var o=E(k);h=W(o,!1),o.forEach(l),_=$(s),C(m.$$.fragment,s),this.h()},h(){w(n,"id","time-range"),w(n,"tabindex","-1"),h.a=null,w(k,"class","language-js")},m(s,o){i(s,n,o),i(s,p,o),i(s,t,o),i(s,c,o),i(s,r,o),i(s,y,o),i(s,k,o),h.m(q,k),i(s,_,o),L(m,s,o),b=!0},p:M,i(s){b||(H(m.$$.fragment,s),b=!0)},o(s){R(m.$$.fragment,s),b=!1},d(s){s&&(l(n),l(p),l(t),l(c),l(r),l(y),l(k),l(_)),S(m,s)}}}function K(u){let n,e;const p=[u[0]];let t={$$slots:{default:[J]},$$scope:{ctx:u}};for(let a=0;anpm install svelte-gantt',j,R,qt="Use ES6 imports in your code:",Z,S,tt,oe=`import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';`,et,G,At="or use the IIFE build:",at,I,st,ce='<script src="node_modules/svelte-gantt/index.iife.js"></script>',nt,w,Bt="var options = {
/* ... */
};
var gantt = new SvelteGantt({
// target a DOM element
target: document.getElementById('example-gantt'),
// svelte-gantt options
props: options
});`,ot,O,Nt="..or run the example by opening ./public/index.html",ct,g,Ut='Usage with svelte',ut,D,Yt="To use svelte components import from svelte-gantt/svelte:",it,q,rt,ie=`<script>
import { SvelteGantt, SvelteGanttTable, MomentSvelteGanttDateAdapter } from 'svelte-gantt/svelte';
let options = {
//
};
</script>
<div class="container">
<SvelteGantt {...options}></SvelteGantt>
</div>`,dt,x,Ft='Development build',mt,A,Jt=`If you want to build from sources:
Install the dependencies…`,ft,B,kt,re=`cd svelte-gantt
npm install
cd demo
npm install`,_t,_,Ht,J,Kt="cd ..",Tt,b,Lt,vt,N,ht,de='npm run demo:dev',gt,v,Mt,C,Pt,K,Qt="src",jt,xt,$,Vt='Build the package',$t,U,Wt="To build the package yourself:",wt,Y,Xt="npm install
npm run package`,yt,y,Zt="svelte-gantt no longer requires moment. You can still use it as MomentSvelteGanttDateAdapter. All parameters that were previously moment objects became numbers (milliseconds since UNIX epoch).",o,i,M="ALL date parameters should be UNIX timestamps (JavaScript Date and moment objects will still work in most of the cases).",h,d,y="Date parameters can stay moment or JavaScript Date objects because they will be transformed to UNIX timestamps.",x,u,H="CSS is now injected so no need to include svelteGantt.css in your HTML.";return{c(){e=_("h1"),e.innerHTML=l,n=g(),s=_("p"),s.innerHTML=a,o=g(),i=_("p"),i.innerHTML=M,h=g(),d=_("p"),d.textContent=y,x=g(),u=_("p"),u.innerHTML=H,this.h()},l(t){e=f(t,"H1",{id:!0,tabindex:!0,"data-svelte-h":!0}),v(e)!=="svelte-cstane"&&(e.innerHTML=l),n=L(t),s=f(t,"P",{"data-svelte-h":!0}),v(s)!=="svelte-6h93ew"&&(s.innerHTML=a),o=L(t),i=f(t,"P",{"data-svelte-h":!0}),v(i)!=="svelte-eqspx7"&&(i.innerHTML=M),h=L(t),d=f(t,"P",{"data-svelte-h":!0}),v(d)!=="svelte-1cpoh57"&&(d.textContent=y),x=L(t),u=f(t,"P",{"data-svelte-h":!0}),v(u)!=="svelte-1g7hg31"&&(u.innerHTML=H),this.h()},h(){T(e,"id","migrating-from-version-3x-to-4"),T(e,"tabindex","-1")},m(t,r){m(t,e,r),m(t,n,r),m(t,s,r),m(t,o,r),m(t,i,r),m(t,h,r),m(t,d,r),m(t,x,r),m(t,u,r)},p:w,d(t){t&&(c(e),c(n),c(s),c(o),c(i),c(h),c(d),c(x),c(u))}}}function k(p){let e,l;const n=[p[0]];let s={$$slots:{default:[J]},$$scope:{ctx:p}};for(let a=0;a