![](\"./packages/docs-mdsvex/static/favicon.svg\")
\n \n\n \n\n Website\n ·\n Quickstart\n ·\n Documentation\n
\n\n\n\nA **lightweight** and **fast** interactive gantt chart/resource booking component made with [Svelte](https://svelte.technology/). Compatible with any JS library or framework. ZERO dependencies.\n\n\n\n# Features\n\n- High performance - display large datasets\n- Interactive - drag and drop elements\n- Tree view\n- Zoom in/out\n- Dependencies\n- Date ranges\n- ...\n\n# Getting started\n\n```\nnpm install svelte-gantt\n```\n\nImport the component:\n\n```js\nimport { SvelteGantt } from 'svelte-gantt';\n```\n\nor use the IIFE build:\n\n```html\n\n```\n\nInitialize svelte-gantt:\n\n```js\nvar options = {\n /* ... */\n};\n\nvar gantt = new SvelteGantt({\n // target a DOM element\n target: document.getElementById('example-gantt'),\n // svelte-gantt options\n props: options\n});\n```\n\n# Need help?\n\nI am happy to help you. [Post an issue](https://github.com/ANovokmet/svelte-gantt/issues) or [contact me](https://github.com/ANovokmet).\n" }, { "path": "docs/.nojekyll", "content": "" }, { "path": "docs/404.html", "content": "\n\n\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t![\"npm\"](\"https://img.shields.io/npm/v/svelte-gantt\")
\n ![\"npm](\"https://img.shields.io/npm/dm/svelte-gantt\")
\n ![\"MIT\"](\"https://img.shields.io/github/license/ANovokmet/svelte-gantt\")
\n 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';\n\n// ...\nlet id = 0;\n\ngantt.$set({\n enableCreateTask: true,\n onCreateTask: (data) => {\n id++;\n return {\n id: id,\n label: `New task ${id}`,\n ...data\n };\n },\n onCreatedTask: (task) => {\n console.log('task created', task);\n }\n});`,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';\n\ngantt.$set({\n dependencies: [\n {\n id: 1,\n fromId: 1,\n toId: 2\n }\n ],\n ganttBodyModules: [SvelteGanttDependencies]\n});`,x,i,$=\"Gantt props:\",L,u,M='dependenciesobject[]idnumber | stringfromIdnumber | stringtoIdnumber | stringstrokestring'red' or '#ff0000'strokeWidthnumberarrowSizenumbernew SvelteGanttExternal(\n // external DOM element\n document.getElementById('newTaskButton'),\n // options\n {\n // reference to instance of svelte-gantt\n gantt,\n // if enabled\n enabled: true,\n // success callback\n // row: row element was dropped on\n // date: date element was dropped on\n // gantt: instance of svelte-gantt\n onsuccess: (row, date, gantt) => {\n // here you can add a task to row, see './public/main.js'\n },\n // called when dragged outside main gantt area\n onfail: () => {},\n // factory function, creates HTMLElement that will follow the mouse\n elementContent: () => {\n const element = document.createElement('div');\n element.innerHTML = 'New Task';\n Object.assign(element.style, {\n position: 'absolute',\n background: '#eee',\n padding: '0.5em 1em',\n fontSize: '12px',\n pointerEvents: 'none'\n });\n return element;\n }\n }\n);`,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';\n\n// ...\n\ngantt.$set({\n tableHeaders: [\n { title: 'Name', property: 'label', width: 150 },\n { title: 'Age', property: 'age', width: 50 },\n ],\n ganttTableModules: [SvelteGanttTable],\n});`,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({ \n target: document.getElementById('example-gantt'), \n props: { \n // ...\n }\n});`,ke,K,od=\"To update use $set, eg.\",He,Q,Me,Ma=`gantt.$set({\n // ...\n});`,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';\nimport moment from 'Moment';\n\nconst options = {\n dateAdapter: new MomentSvelteGanttDateAdapter(moment)\n // ...\n}`,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';\n\nconst options = {\n dateAdapter: {\n format(date, format) {\n return dayjs(date).format(format);\n }\n },\n // ...\n}`;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;t'overlap' - Tasks cover each other.'pack' - Tasks shrink to fit in the row.'expand' - Row expands to fit tasks.zoomLevels) can be provided. When using wheel + ctrl the options cycle.\nEach of the levels can have the following fields:`,u,c,g='headersHeader[]minWidthnumberfitWidthbooleancolumnUnitstringcolumnOffsetnumbergantt.$set({\n zoomLevels: [\n\t\t{\n\t\t\theaders: [{ unit: 'month', format: 'MMM YYYY' }],\n\t\t\tminWidth: 800,\n\t\t\tcolumnUnit: 'day',\n\t\t\tcolumnOffset: 1\n\t\t},\n\t\t{\n\t\t\theaders: [\n\t\t\t\t{ unit: 'month', format: 'MMM YYYY' },\n\t\t\t\t{ unit: 'week', format: '[week] w' },\n\t\t\t\t{ unit: 'day', format: 'D' }\n\t\t\t],\n\t\t\tminWidth: 3200,\n\t\t\tcolumnUnit: 'hour',\n\t\t\tcolumnOffset: 4\n\t\t},\n\t\t{\n\t\t\theaders: [\n\t\t\t\t{ unit: 'day', format: 'MMM D, YYYY' },\n\t\t\t\t{ unit: 'hour', format: 'HH' }\n\t\t\t],\n\t\t\tminWidth: 8000,\n\t\t\tcolumnUnit: 'hour',\n\t\t\tcolumnOffset: 2\n\t\t},\n\t\t{\n\t\t\theaders: [\n\t\t\t\t{ unit: 'day', format: 'MMM D, YYYY' },\n\t\t\t\t{ unit: 'hour', format: 'HH' }\n\t\t\t],\n\t\t\tminWidth: 16000,\n\t\t\tcolumnUnit: 'hour',\n\t\t\tcolumnOffset: 2\n\t\t},\n\t\t{\n\t\t\theaders: [\n\t\t\t\t{ unit: 'day', format: 'MMM D, YYYY' },\n\t\t\t\t{ unit: 'hour', format: 'HH' }\n\t\t\t],\n\t\t\tminWidth: 32000,\n\t\t\tcolumnUnit: 'hour',\n\t\t\tcolumnOffset: 2\n\t\t}\n\t]\n})`,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\n\t\t\t\t\tmade 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({\n tableHeaders={[ { title: 'Title', property: 'label', type: 'tree' } ]},\n rows={[\n {\n id: 1, \n label: 'Parent 1', \n expanded: false, \n children: [\n { id: 11, label: 'Child 1' }, \n { id: 12, label: 'Child 2' }\n ]\n }, \n {\n id: 2, \n label: 'Parent 2', \n expanded: true, \n children: [\n { id: 21, label: 'Child 1', children: [{ id: 211, label: 'Grandchild 1' }] }, \n { id: 22, label: 'Child 2' }, \n { id: 23, label: 'Child 3' }\n ]\n },\n {\n id: 3, \n label: 'No children' \n },\n ]}\n});\n`,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) => { \n node.addEventListener('click', console.log); \n return { \n update(task) { \n // ...\n },\n destroy() {\n node.removeEventListener('click', console.log);\n } \n }; \n}`,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 = {\n // ...\n timeRanges: [\n {\n id: 2,\n from: new Date('2024-02-01T08:00:00').valueOf(),\n to: new Date('2024-02-01T09:00:00').valueOf(),\n label: 'Breakfast'\n },\n {\n id: 1,\n from: new Date('2024-02-01T10:00:00').valueOf(),\n to: new Date('2024-02-01T11:00:00').valueOf(),\n classes: 'time-range-lunch',\n label: 'Lunch',\n resizable: false,\n },\n {\n id: 3,\n from: new Date('2024-02-01T11:00:00').valueOf(),\n to: new Date('2024-02-01T12:00:00').valueOf(),\n label: 'Custom class',\n classes: 'gradient',\n }\n ]\n}`,_,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 = {\n /* ... */\n};\n\nvar gantt = new SvelteGantt({\n // target a DOM element\n target: document.getElementById('example-gantt'),\n // svelte-gantt options\n props: options\n});`,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>\n import { SvelteGantt, SvelteGanttTable, MomentSvelteGanttDateAdapter } from 'svelte-gantt/svelte';\n\n let options = {\n //\n };\n</script>\n<div class=\"container\">\n <SvelteGantt {...options}></SvelteGantt>\n</div>`,dt,x,Ft='Development build#',mt,A,Jt=`If you want to build from sources:\nInstall the dependencies…`,ft,B,kt,re=`cd svelte-gantt\nnpm install\ncd demo\nnpm 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\nnpm 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