├── docs ├── .nojekyll ├── _app │ ├── version.json │ └── immutable │ │ ├── entry │ │ └── start.Dwci9Oks.js │ │ ├── chunks │ │ ├── paths.oQcPQ3IF.js │ │ ├── stores.BxMDhJ8m.js │ │ ├── spread.CgU5AtxT.js │ │ ├── control.CYgJF_JY.js │ │ ├── layout.zjTtpqzV.js │ │ ├── each.DqwAsWNO.js │ │ ├── A.201zTarD.js │ │ ├── store.CCmTIowZ.js │ │ └── index.DyGm78TJ.js │ │ ├── assets │ │ ├── 17.CKKkePFl.css │ │ ├── _page.CKKkePFl.css │ │ ├── 3.D4zGWEJI.css │ │ ├── _page.D4zGWEJI.css │ │ ├── 7.zCu19reB.css │ │ ├── _page.zCu19reB.css │ │ ├── 5.HrAC0il4.css │ │ ├── _page.HrAC0il4.css │ │ ├── _page.BMXDRz-s.css │ │ └── 6.DZf7PkB2.css │ │ └── nodes │ │ ├── 4.C_seFb3q.js │ │ ├── 1.MAtuXuJq.js │ │ ├── 9.D5dLAYhx.js │ │ └── 14.CPQ9PDjB.js ├── favicon.png ├── favicon.svg └── 404.html ├── packages ├── demo │ ├── static │ │ ├── .nojekyll │ │ ├── joe.jpg │ │ └── favicon.png │ ├── .npmrc │ ├── src │ │ ├── routes │ │ │ ├── +layout.js │ │ │ ├── +page.svelte │ │ │ └── +layout.svelte │ │ ├── lib │ │ │ └── index.js │ │ ├── utils.js │ │ ├── stores │ │ │ └── store.js │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── main.css │ │ ├── components │ │ │ ├── DateTime.svelte │ │ │ ├── GanttViewNavigation.svelte │ │ │ └── GanttOptions.svelte │ │ └── gantt-default.css │ ├── .gitignore │ ├── vite.config.js │ ├── package.json │ ├── jsconfig.json │ ├── README.md │ └── svelte.config.js ├── docs-mdsvex │ ├── static │ │ ├── .nojekyll │ │ ├── favicon.png │ │ └── favicon.svg │ ├── .npmrc │ ├── src │ │ ├── routes │ │ │ ├── +layout.js │ │ │ ├── docs │ │ │ │ ├── layout.svelte │ │ │ │ ├── +page.js │ │ │ │ ├── options │ │ │ │ │ ├── layout │ │ │ │ │ │ ├── +page.svx │ │ │ │ │ │ └── LayoutExample.svelte │ │ │ │ │ ├── columns │ │ │ │ │ │ └── +page.svx │ │ │ │ │ ├── headers │ │ │ │ │ │ └── +page.svx │ │ │ │ │ └── zoom │ │ │ │ │ │ ├── +page.svx │ │ │ │ │ │ └── ZoomExample.svelte │ │ │ │ ├── getting-started │ │ │ │ │ ├── migrating │ │ │ │ │ │ └── +page.svx │ │ │ │ │ └── installation │ │ │ │ │ │ └── +page.svx │ │ │ │ ├── modules │ │ │ │ │ ├── table │ │ │ │ │ │ ├── TableExample.svelte │ │ │ │ │ │ └── +page.svx │ │ │ │ │ ├── create-tasks │ │ │ │ │ │ ├── +page.svx │ │ │ │ │ │ └── CreateTasksExample.svelte │ │ │ │ │ ├── dependencies │ │ │ │ │ │ └── +page.svx │ │ │ │ │ └── external │ │ │ │ │ │ ├── ExternalExample.svelte │ │ │ │ │ │ └── +page.svx │ │ │ │ ├── data │ │ │ │ │ ├── rows │ │ │ │ │ │ ├── RowsExample.svelte │ │ │ │ │ │ ├── TreeExample.svelte │ │ │ │ │ │ └── +page.svx │ │ │ │ │ ├── time-ranges │ │ │ │ │ │ ├── TimeRangesExample.svelte │ │ │ │ │ │ └── +page.svx │ │ │ │ │ └── tasks │ │ │ │ │ │ ├── TasksExample.svelte │ │ │ │ │ │ ├── TaskComponentExample.svelte │ │ │ │ │ │ ├── +page.svx │ │ │ │ │ │ └── TaskComponentExample.css │ │ │ │ └── +layout.svelte │ │ │ ├── FeatureCard.svelte │ │ │ ├── +layout.svelte │ │ │ └── HeroExample.svelte │ │ ├── app.css │ │ ├── lib │ │ │ ├── components │ │ │ │ ├── A.svelte │ │ │ │ ├── IconButton.svelte │ │ │ │ ├── NavLink.svelte │ │ │ │ ├── SideBarCategory.svelte │ │ │ │ ├── SideBarLink.svelte │ │ │ │ ├── SideBar.svelte │ │ │ │ ├── Button.svelte │ │ │ │ └── NavBar.svelte │ │ │ ├── icons │ │ │ │ ├── CloseIcon.svelte │ │ │ │ ├── ArrowRightIcon.svelte │ │ │ │ ├── MenuIcon.svelte │ │ │ │ ├── MoonIcon.svelte │ │ │ │ ├── SunIcon.svelte │ │ │ │ ├── GithubIcon.svelte │ │ │ │ └── SvelteGanttLogo.svelte │ │ │ ├── styles │ │ │ │ ├── fonts.css │ │ │ │ └── vars.css │ │ │ ├── index.js │ │ │ └── store.js │ │ └── app.html │ ├── jsconfig.json │ ├── .prettierignore │ ├── postcss.config.js │ ├── .gitignore │ ├── .eslintignore │ ├── .prettierrc │ ├── .eslintrc.cjs │ ├── vite.config.js │ ├── README.md │ ├── package.json │ └── svelte.config.js └── svelte-gantt │ ├── src │ ├── core │ │ ├── constants.ts │ │ ├── drag │ │ │ ├── index.ts │ │ │ ├── DragContext.ts │ │ │ └── Draggable.svelte │ │ ├── selectionManager.ts │ │ ├── timeRange.ts │ │ ├── events.ts │ │ ├── column.ts │ │ └── api.ts │ ├── modules │ │ ├── table │ │ │ ├── index.ts │ │ │ ├── tableHeader.ts │ │ │ └── TableTreeCell.svelte │ │ ├── dependencies │ │ │ ├── index.ts │ │ │ ├── dependency.ts │ │ │ └── GanttDependencies.svelte │ │ └── external │ │ │ └── external.ts │ ├── entities │ │ ├── Task.d.ts │ │ ├── index.ts │ │ ├── Row.svelte │ │ └── TimeRange.svelte │ ├── ui │ │ ├── index.ts │ │ ├── ContextMenu.svelte │ │ └── Resizer.svelte │ ├── column │ │ ├── index.ts │ │ ├── Column.svelte │ │ ├── ColumnHeader.svelte │ │ ├── canvas.ts │ │ └── Columns.svelte │ ├── context.d.ts │ ├── index.ts │ └── utils │ │ ├── contextMenuManager.ts │ │ └── momentDateAdapter.ts │ ├── .eslintignore │ ├── .prettierignore │ ├── .prettierrc │ ├── svelte.config.js │ ├── tsconfig.json │ ├── rollup.config.js │ ├── LICENSE.txt │ ├── .eslintrc.cjs │ ├── .gitignore │ └── package.json ├── pnpm-workspace.yaml ├── examples ├── example-sveltekit │ ├── .npmrc │ ├── static │ │ └── favicon.png │ ├── src │ │ ├── utils.js │ │ ├── stores │ │ │ └── store.js │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── components │ │ │ └── DateTime.svelte │ │ ├── gantt-default.css │ │ └── routes │ │ │ └── +layout.svelte │ ├── .gitignore │ ├── vite.config.js │ ├── svelte.config.js │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── example-svelte │ ├── .gitignore │ ├── src │ │ ├── utils.js │ │ ├── index.js │ │ ├── components │ │ │ ├── DateTime.svelte │ │ │ └── GanttOptions.svelte │ │ └── App.svelte │ ├── rollup.config.js │ └── package.json └── example-reactjs │ ├── public │ ├── robots.txt │ ├── manifest.json │ └── index.html │ ├── README.md │ ├── src │ ├── App.js │ └── index.js │ ├── .gitignore │ └── package.json ├── .eslintignore ├── .prettierignore ├── .prettierrc ├── package.json ├── LICENSE.txt ├── .eslintrc.cjs ├── .gitignore └── README.md /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/demo/static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/demo/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /docs/_app/version.json: -------------------------------------------------------------------------------- 1 | {"version":"1723125560024"} -------------------------------------------------------------------------------- /packages/docs-mdsvex/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' -------------------------------------------------------------------------------- /examples/example-sveltekit/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /examples/example-svelte/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/+layout.js: -------------------------------------------------------------------------------- 1 | export const ssr = false; 2 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ANovokmet/svelte-gantt/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /packages/demo/src/routes/+layout.js: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | export const ssr = false; 3 | -------------------------------------------------------------------------------- /packages/demo/src/lib/index.js: -------------------------------------------------------------------------------- 1 | // place files you want to import through the `$lib` alias in this folder. 2 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/core/constants.ts: -------------------------------------------------------------------------------- 1 | export const MIN_DRAG_X = 2; 2 | export const MIN_DRAG_Y = 2; 3 | -------------------------------------------------------------------------------- /docs/_app/immutable/entry/start.Dwci9Oks.js: -------------------------------------------------------------------------------- 1 | import{a as t}from"../chunks/entry.0-2BfHub.js";export{t as start}; 2 | -------------------------------------------------------------------------------- /packages/demo/static/joe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ANovokmet/svelte-gantt/HEAD/packages/demo/static/joe.jpg -------------------------------------------------------------------------------- /examples/example-reactjs/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /packages/demo/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ANovokmet/svelte-gantt/HEAD/packages/demo/static/favicon.png -------------------------------------------------------------------------------- /packages/docs-mdsvex/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": {} 4 | } 5 | -------------------------------------------------------------------------------- /examples/example-reactjs/README.md: -------------------------------------------------------------------------------- 1 | ## Install 2 | `yarn i` or `npm i` 3 | 4 | # Launch 5 | `yarn start` or `npm start` -------------------------------------------------------------------------------- /packages/docs-mdsvex/.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore files for PNPM, NPM and YARN 2 | pnpm-lock.yaml 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ANovokmet/svelte-gantt/HEAD/packages/docs-mdsvex/static/favicon.png -------------------------------------------------------------------------------- /packages/svelte-gantt/src/modules/table/index.ts: -------------------------------------------------------------------------------- 1 | import SvelteGanttTable from './Table.svelte'; 2 | 3 | export { SvelteGanttTable }; 4 | -------------------------------------------------------------------------------- /examples/example-sveltekit/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ANovokmet/svelte-gantt/HEAD/examples/example-sveltekit/static/favicon.png -------------------------------------------------------------------------------- /examples/example-svelte/src/utils.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | 3 | export function time(input) { 4 | return moment(input, 'HH:mm'); 5 | } 6 | -------------------------------------------------------------------------------- /examples/example-sveltekit/src/utils.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | 3 | export function time(input) { 4 | return moment(input, 'HH:mm'); 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/entities/Task.d.ts: -------------------------------------------------------------------------------- 1 | // declare module '*.svelte' { 2 | // export { SvelteComponentDev as default } from 'svelte/internal'; 3 | // } 4 | -------------------------------------------------------------------------------- /packages/demo/src/utils.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | 3 | window.moment = moment; 4 | 5 | export function time(input) { 6 | return moment(input, 'HH:mm'); 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .landing-page .nav-category { 6 | display: none !important; 7 | } -------------------------------------------------------------------------------- /examples/example-svelte/src/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.getElementById("app") 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | -------------------------------------------------------------------------------- /packages/demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | -------------------------------------------------------------------------------- /examples/example-sveltekit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/paths.oQcPQ3IF.js: -------------------------------------------------------------------------------- 1 | var s;const e=((s=globalThis.__sveltekit_btsuk1)==null?void 0:s.base)??"/svelte-gantt";var t;const a=((t=globalThis.__sveltekit_btsuk1)==null?void 0:t.assets)??e;export{a,e as b}; 2 | -------------------------------------------------------------------------------- /examples/example-sveltekit/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /examples/example-reactjs/src/App.js: -------------------------------------------------------------------------------- 1 | import Gantt from './Gantt/index'; 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/+page.js: -------------------------------------------------------------------------------- 1 | import { base } from '$app/paths'; 2 | import { redirect } from '@sveltejs/kit'; 3 | 4 | export const load = () => { 5 | redirect(307, `${base}/docs/getting-started/installation`); 6 | }; 7 | -------------------------------------------------------------------------------- /examples/example-reactjs/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | ); 9 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/A.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/core/drag/index.ts: -------------------------------------------------------------------------------- 1 | export * from './draggable'; 2 | export { default as DraggableGroup } from './DraggableGroup.svelte'; 3 | export { default as Draggable } from './Draggable.svelte'; 4 | export type { DragContext } from './DragContext'; 5 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/modules/dependencies/index.ts: -------------------------------------------------------------------------------- 1 | import SvelteGanttDependencies from './GanttDependencies.svelte'; 2 | import type { DependencyModel } from './dependency'; 3 | 4 | export { SvelteGanttDependencies }; 5 | export type { DependencyModel }; 6 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/ui/index.ts: -------------------------------------------------------------------------------- 1 | // this file is not typescript because of typescript not recognizing svelte components as modules 2 | import ContextMenu from './ContextMenu.svelte'; 3 | import Resizer from './Resizer.svelte'; 4 | 5 | export { ContextMenu, Resizer }; 6 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/stores.BxMDhJ8m.js: -------------------------------------------------------------------------------- 1 | import{s as e}from"./entry.0-2BfHub.js";const r=()=>{const s=e;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},b={subscribe(s){return r().page.subscribe(s)}};export{b as p}; 2 | -------------------------------------------------------------------------------- /examples/example-sveltekit/src/stores/store.js: -------------------------------------------------------------------------------- 1 | import {writable} from 'svelte/store'; 2 | 3 | 4 | export const options = writable({}); 5 | export const showOptions = writable(false); 6 | 7 | export const setView = writable('none'); 8 | export const moveView = writable('none'); -------------------------------------------------------------------------------- /packages/demo/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | // root: '.', 6 | // build: { 7 | // outDir: '../docs2', 8 | // }, 9 | plugins: [sveltekit()] 10 | }); 11 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/CloseIcon.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/FeatureCard.svelte: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |

5 |

6 | 7 |

8 |
9 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte", "printWidth": 200 } }] 8 | } 9 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/entities/index.ts: -------------------------------------------------------------------------------- 1 | import Task from './Task.svelte'; 2 | import Row from './Row.svelte'; 3 | import TimeRange from './TimeRange.svelte'; 4 | import TimeRangeHeader from './TimeRangeHeader.svelte'; 5 | 6 | export { Task, Row, TimeRange, TimeRangeHeader }; 7 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/ArrowRightIcon.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/MenuIcon.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Repo files 11 | /demo 12 | /examples 13 | /dist 14 | /docs 15 | 16 | # Ignore files for PNPM, NPM and YARN 17 | pnpm-lock.yaml 18 | package-lock.json 19 | yarn.lock 20 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Repo files 11 | /demo 12 | /examples 13 | /dist 14 | /docs 15 | 16 | # Ignore files for PNPM, NPM and YARN 17 | pnpm-lock.yaml 18 | package-lock.json 19 | yarn.lock 20 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/column/index.ts: -------------------------------------------------------------------------------- 1 | import Column from './Column.svelte'; 2 | import ColumnHeaderRow from './ColumnHeaderRow.svelte'; 3 | import ColumnHeader from './ColumnHeader.svelte'; 4 | import Columns from './Columns.svelte'; 5 | 6 | export { Column, ColumnHeaderRow, ColumnHeader, Columns }; 7 | -------------------------------------------------------------------------------- /packages/demo/src/stores/store.js: -------------------------------------------------------------------------------- 1 | import {writable} from 'svelte/store'; 2 | 3 | export const options = writable({ 4 | from: null, 5 | to: null, 6 | }); 7 | export const showOptions = writable(false); 8 | 9 | export const setView = writable('none'); 10 | export const moveView = writable('none'); -------------------------------------------------------------------------------- /packages/demo/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 4, 4 | "arrowParens": "avoid", 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "printWidth": 180, 8 | "plugins": ["prettier-plugin-svelte"], 9 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 10 | } 11 | -------------------------------------------------------------------------------- /packages/svelte-gantt/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Repo files 11 | /demo 12 | /examples 13 | /dist 14 | /docs 15 | 16 | # Ignore files for PNPM, NPM and YARN 17 | pnpm-lock.yaml 18 | package-lock.json 19 | yarn.lock 20 | -------------------------------------------------------------------------------- /examples/example-sveltekit/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelte-gantt/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Repo files 11 | /demo 12 | /examples 13 | /dist 14 | /docs 15 | 16 | # Ignore files for PNPM, NPM and YARN 17 | pnpm-lock.yaml 18 | package-lock.json 19 | yarn.lock 20 | -------------------------------------------------------------------------------- /packages/svelte-gantt/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 4, 4 | "arrowParens": "avoid", 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "printWidth": 180, 8 | "plugins": ["prettier-plugin-svelte"], 9 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 10 | } 11 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/17.CKKkePFl.css: -------------------------------------------------------------------------------- 1 | .example.svelte-5zals3 .blue{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.example.svelte-5zals3 .orange{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}.example.svelte-5zals3 .violet{--tw-bg-opacity:1;background-color:rgb(167 139 250 / var(--tw-bg-opacity))} 2 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/IconButton.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.CKKkePFl.css: -------------------------------------------------------------------------------- 1 | .example.svelte-5zals3 .blue{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.example.svelte-5zals3 .orange{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}.example.svelte-5zals3 .violet{--tw-bg-opacity:1;background-color:rgb(167 139 250 / var(--tw-bg-opacity))} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/spread.CgU5AtxT.js: -------------------------------------------------------------------------------- 1 | function r(t,s){const c={},u={},f={$$scope:1};let i=t.length;for(;i--;){const o=t[i],e=s[i];if(e){for(const n in o)n in e||(u[n]=1);for(const n in e)f[n]||(c[n]=e[n],f[n]=1);t[i]=e}else for(const n in o)f[n]=1}for(const o in u)o in c||(c[o]=void 0);return c}function a(t){return typeof t=="object"&&t!==null?t:{}}export{a,r as g}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/control.CYgJF_JY.js: -------------------------------------------------------------------------------- 1 | class i{constructor(t,s){this.status=t,typeof s=="string"?this.body={message:s}:s?this.body=s:this.body={message:`Error: ${t}`}}toString(){return JSON.stringify(this.body)}}class o{constructor(t,s){this.status=t,this.location=s}}class a extends Error{constructor(t,s,e){super(e),this.status=t,this.text=s}}export{i as H,o as R,a as S}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/nodes/4.C_seFb3q.js: -------------------------------------------------------------------------------- 1 | import{b as o}from"../chunks/paths.oQcPQ3IF.js";import{R as r}from"../chunks/control.CYgJF_JY.js";function n(e,t){throw new r(e,t.toString())}new TextEncoder;const a=()=>{n(307,`${o}/docs/getting-started/installation`)},c=Object.freeze(Object.defineProperty({__proto__:null,load:a},Symbol.toStringTag,{value:"Module"}));export{c as universal}; 2 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/NavLink.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
  • 9 | 10 | {title} 11 | 12 |
    • 13 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/SideBarCategory.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
  • 6 |
    7 | {title} 8 |
    9 | 14 |
    • 15 | -------------------------------------------------------------------------------- /packages/svelte-gantt/svelte.config.js: -------------------------------------------------------------------------------- 1 | /** used exclusively for packaging with svelte-package */ 2 | // import { vitePreprocess as sveltePreprocess } from '@sveltejs/kit/vite'; 3 | import sveltePreprocess from 'svelte-preprocess'; 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | const config = { 7 | preprocess: sveltePreprocess() 8 | }; 9 | 10 | export default config; 11 | -------------------------------------------------------------------------------- /packages/demo/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
    %sveltekit.body%
    11 | 12 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** @type { import("eslint").Linter.Config } */ 2 | module.exports = { 3 | root: true, 4 | extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'], 5 | parserOptions: { 6 | sourceType: 'module', 7 | ecmaVersion: 2020, 8 | extraFileExtensions: ['.svelte'] 9 | }, 10 | env: { 11 | browser: true, 12 | es2017: true, 13 | node: true 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/options/layout/+page.svx: -------------------------------------------------------------------------------- 1 | 4 | 5 | # Layout 6 | 7 | Multiple ways of displaying overlapped tasks are available as the `layout` option: 8 | 9 | - `'overlap'` - Tasks cover each other. 10 | - `'pack'` - Tasks shrink to fit in the row. 11 | - `'expand'` - Row expands to fit tasks. 12 | 13 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/modules/dependencies/dependency.ts: -------------------------------------------------------------------------------- 1 | export interface DependencyModel { 2 | id: number; 3 | /** Id of dependent task */ 4 | fromId: number; 5 | /** Id of dependency task */ 6 | toId: number; 7 | /** Stroke color */ 8 | stroke: string; 9 | /** Width of stroke */ 10 | strokeWidth: number; 11 | /** Size of the arrow head */ 12 | arrowSize: number; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/column/Column.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 8 | 19 | -------------------------------------------------------------------------------- /examples/example-reactjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/MoonIcon.svelte: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/modules/table/tableHeader.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteRow } from '../../core/row'; 2 | 3 | export interface TableHeader { 4 | /** Table column title */ 5 | title: string; 6 | /** Table row property */ 7 | property: string; 8 | width?: number; 9 | /** Result can be a html string */ 10 | renderer?: (row: SvelteRow) => string; 11 | /** Type of header, can be `tree` */ 12 | type?: 'tree' | any; 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/SunIcon.svelte: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/column/ColumnHeader.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | {#each headers as header} 13 | 14 | {/each} 15 | -------------------------------------------------------------------------------- /examples/example-sveltekit/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
    %sveltekit.body%
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/example-sveltekit/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | import path from 'path' 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | const config = { 7 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 8 | // for more information about preprocessors 9 | preprocess: vitePreprocess(), 10 | 11 | kit: { 12 | adapter: adapter(), 13 | alias:{ 14 | '$dist': path.resolve('../dist'), 15 | } 16 | } 17 | }; 18 | 19 | export default config; 20 | -------------------------------------------------------------------------------- /packages/demo/src/main.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin:0; 3 | height: 100%; 4 | } 5 | 6 | button, input[type=button]{ 7 | border: transparent; 8 | font-size: 14px; 9 | font-weight: 300; 10 | padding: 6px 12px; 11 | background: #cc595e; 12 | color: #ffffff; 13 | cursor: pointer; 14 | transition: background 0.2s; 15 | outline: none; 16 | } 17 | 18 | button:hover, input[type=button]:hover { 19 | background-color: #b14d51; 20 | } 21 | 22 | button:active, input[type=button]:active{ 23 | background-color: #9d4548; 24 | } 25 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 | 11 | 12 |
    %sveltekit.body%
    13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/layout.zjTtpqzV.js: -------------------------------------------------------------------------------- 1 | import{s as l,q as i,v as r,w as u,x as f}from"./scheduler.lruobs1Y.js";import{S as _,i as c,a as p,t as m}from"./index.DyGm78TJ.js";import"./paths.oQcPQ3IF.js";function $(a){let s;const n=a[1].default,e=i(n,a,a[0],null);return{c(){e&&e.c()},l(t){e&&e.l(t)},m(t,o){e&&e.m(t,o),s=!0},p(t,[o]){e&&e.p&&(!s||o&1)&&r(e,n,t,t[0],s?f(n,t[0],o,null):u(t[0]),null)},i(t){s||(p(e,t),s=!0)},o(t){m(e,t),s=!1},d(t){e&&e.d(t)}}}function d(a,s,n){let{$$slots:e={},$$scope:t}=s;return a.$$set=o=>{"$$scope"in o&&n(0,t=o.$$scope)},[t,e]}class v extends _{constructor(s){super(),c(this,s,d,$,l,{})}}export{v as L}; 2 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/getting-started/migrating/+page.svx: -------------------------------------------------------------------------------- 1 | # Migrating from version 3.x to 4 2 | 3 | `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). 4 | 5 | ALL date parameters should be UNIX timestamps (JavaScript `Date` and `moment` objects will still work in most of the cases). 6 | 7 | Date parameters can stay moment or JavaScript Date objects because they will be transformed to UNIX timestamps. 8 | 9 | CSS is now injected so no need to include `svelteGantt.css` in your HTML. -------------------------------------------------------------------------------- /examples/example-reactjs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/SideBarLink.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | {label} 20 | 21 | -------------------------------------------------------------------------------- /packages/svelte-gantt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "baseUrl": "./", 6 | "rootDir": ".", 7 | "target": "ESNext", 8 | "module": "ESNext", 9 | "moduleResolution": "node", 10 | "types": ["svelte"], 11 | "declaration": true, 12 | "declarationDir": "./dist", 13 | // "declarationDir": "./dist/types", 14 | "importsNotUsedAsValues": "remove", 15 | "isolatedModules": false 16 | }, 17 | "include": ["src/**/*"], 18 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/example-sveltekit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "paths": { 13 | "$dist": ["../dist"] 14 | } 15 | } 16 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 17 | // 18 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 19 | // from the referenced tsconfig.json - TypeScript does not merge them in 20 | } 21 | -------------------------------------------------------------------------------- /packages/demo/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | svelte-gantt 6 | 7 |
    8 |
    9 |

    Svelte-gantt

    10 |

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

    11 |

    Demo

    12 |

    To see the examples check the links in the header.

    13 |
    14 |
    15 | 16 | 26 | -------------------------------------------------------------------------------- /packages/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", 11 | "build-gh-pages": "vite build" 12 | }, 13 | "devDependencies": { 14 | "@sveltejs/adapter-auto": "^2.0.0", 15 | "@sveltejs/adapter-static": "^2.0.3", 16 | "@sveltejs/kit": "^1.20.4", 17 | "svelte": "^4.0.5", 18 | "svelte-check": "^3.4.3", 19 | "typescript": "^5.0.0", 20 | "vite": "^4.4.2" 21 | }, 22 | "type": "module" 23 | } 24 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/options/columns/+page.svx: -------------------------------------------------------------------------------- 1 | 2 | # Columns 3 | 4 | eg. `columnUnit: 'minute', columnOffset: 15` will create a column for every 15 minutes. 5 | 6 | ## Highlighted durations 7 | 8 | Highlight a repeating block of time spanning all rows: 9 | 10 | | Name | Type | Description | Default | 11 | | - | - | - | -: | 12 | `unit` | `string` | Time unit of duration, e.g. `'day'`. | 13 | `fractions` | `number[]` | List of fractions that should be highlighted, e.g. `{unit: 'day', fractions: [0,6]}` will highlight weekends. 14 | 15 | Highlighting will only work correctly if `useCanvasColumns` is set to `false`, and if highlighted unit is the same or a constant fraction of the column unit eg. `day`, `hour`, `minute`. -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/table/TableExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 22 |
    23 | -------------------------------------------------------------------------------- /examples/example-sveltekit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-sveltekit", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^1.0.0", 14 | "@sveltejs/kit": "^1.0.0", 15 | "svelte": "^3.54.0", 16 | "svelte-check": "^2.9.2", 17 | "tslib": "^2.4.1", 18 | "typescript": "^4.9.3", 19 | "vite": "^4.0.0" 20 | }, 21 | "type": "module", 22 | "dependencies": { 23 | "svelte-gantt": "^4.0.9-beta" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/context.d.ts: -------------------------------------------------------------------------------- 1 | import { DragContext } from './core/drag'; 2 | import { GanttDataStore } from './core/store'; 3 | import { GanttContext, GanttContextDimensions, GanttContextOptions, GanttContextServices } from './gantt'; 4 | 5 | declare module 'svelte' { 6 | type Contexts = { 7 | 'drag': DragContext; 8 | 'gantt': GanttContext; 9 | 'dataStore': GanttDataStore; 10 | 'services': GanttContextServices; 11 | 'options': GanttContextOptions; 12 | 'dimensions': GanttContextDimensions; 13 | } 14 | 15 | export function setContext(key: K, context: T); 16 | export function getContext(key: K): Contexts[K]; 17 | } 18 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/index.ts: -------------------------------------------------------------------------------- 1 | import type { ComponentProps } from 'svelte'; 2 | 3 | import SvelteGantt from './Gantt.svelte'; 4 | import { SvelteGanttTable } from './modules/table'; 5 | import { SvelteGanttDependencies } from './modules/dependencies'; 6 | import { SvelteGanttExternal } from './modules/external/external'; 7 | import { MomentSvelteGanttDateAdapter } from './utils/momentDateAdapter'; 8 | 9 | export { 10 | SvelteGantt, 11 | SvelteGanttTable, 12 | SvelteGanttDependencies, 13 | SvelteGanttExternal, 14 | MomentSvelteGanttDateAdapter 15 | }; 16 | 17 | type SvelteGanttComponent = SvelteGantt; 18 | 19 | type SvelteGanttOptions = ComponentProps; 20 | 21 | export type { SvelteGanttComponent, SvelteGanttOptions }; 22 | -------------------------------------------------------------------------------- /examples/example-svelte/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import * as path from 'path'; 5 | 6 | export default { 7 | input: path.join(__dirname, 'src/index.js'), 8 | output: { 9 | sourcemap: true, 10 | format: 'iife', 11 | name: 'app', 12 | file: path.join(__dirname, '../docs/build/index.js') 13 | }, 14 | plugins: [ 15 | svelte({ 16 | dev: true, 17 | emitCss: false, 18 | css: css => { 19 | css.write(path.join(__dirname, '../docs/build/index.css')); 20 | } 21 | }), 22 | resolve(), 23 | commonjs() 24 | ], 25 | } 26 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/core/selectionManager.ts: -------------------------------------------------------------------------------- 1 | import type { EntityStore } from '../core/store'; 2 | import { writable } from 'svelte/store'; 3 | import type { SvelteTask } from '../core/task'; 4 | 5 | export class SelectionManager { 6 | _selectedTasks = writable<{ [taskId: PropertyKey]: boolean; }>({}); 7 | 8 | constructor(private taskStore: EntityStore) {} 9 | 10 | selectSingle(taskId) { 11 | this.unSelectTasks(); 12 | this._selectedTasks.set({ [taskId]: true }); 13 | } 14 | 15 | toggleSelection(taskId) { 16 | this._selectedTasks.update(selections => ({ 17 | ...selections, 18 | [taskId]: !selections[taskId] 19 | })); 20 | } 21 | 22 | unSelectTasks() { 23 | this._selectedTasks.set({}); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/example-svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-gantt-demo", 3 | "description": "Svelte-Gantt Demo", 4 | "version": "1.0.0", 5 | "author": "Ante Novokmet ", 6 | "scripts": { 7 | "build": "rollup -c", 8 | "autobuild": "rollup -c -w" 9 | }, 10 | "dependencies": { 11 | "moment": "^2.22.2", 12 | "svelte-routing": "^1.6.0" 13 | }, 14 | "devDependencies": { 15 | "@rollup/plugin-commonjs": "^17.0.0", 16 | "rollup": "^2.36.1", 17 | "rollup-plugin-node-resolve": "^5.2.0", 18 | "rollup-plugin-svelte": "^7.1.0", 19 | "svelte": "^3.46.4", 20 | "svelte-check": "^1.0.0", 21 | "svelte-gantt": "file:../dist", 22 | "svelte-preprocess": "^4.9.8", 23 | "tslib": "^2.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | import { VitePluginWatchWorkspace } from './vite-plugin-watch-workspace'; 4 | import * as path from 'path'; 5 | export default defineConfig({ 6 | plugins: [ 7 | VitePluginWatchWorkspace({ 8 | workspaceRoot: path.join(__dirname, '../..'), 9 | currentPackage: __dirname, 10 | format: 'esm', 11 | fileTypes: ['svelte', 'ts', 'js'], 12 | ignorePaths: ['node_modules', 'dist'] 13 | }), 14 | sveltekit() 15 | ] 16 | // resolve: { preserveSymlinks: true }, 17 | // optimizeDeps: { 18 | // include: ['svelte-gantt'], 19 | // }, 20 | // build: { 21 | // commonjsOptions: { 22 | // include: [/svelte-gantt/, /node_modules/], 23 | // }, 24 | // }, 25 | // commonjsOptions: { include: [] } 26 | }); 27 | -------------------------------------------------------------------------------- /docs/_app/immutable/nodes/1.MAtuXuJq.js: -------------------------------------------------------------------------------- 1 | import{s as x,e as u,t as h,a as S,c as d,b as v,d as g,f as m,g as j,i as _,h as b,j as E,n as $,k}from"../chunks/scheduler.lruobs1Y.js";import{S as q,i as y}from"../chunks/index.DyGm78TJ.js";import{p as C}from"../chunks/stores.BxMDhJ8m.js";function H(i){var f;let a,s=i[0].status+"",r,o,n,p=((f=i[0].error)==null?void 0:f.message)+"",c;return{c(){a=u("h1"),r=h(s),o=S(),n=u("p"),c=h(p)},l(e){a=d(e,"H1",{});var t=v(a);r=g(t,s),t.forEach(m),o=j(e),n=d(e,"P",{});var l=v(n);c=g(l,p),l.forEach(m)},m(e,t){_(e,a,t),b(a,r),_(e,o,t),_(e,n,t),b(n,c)},p(e,[t]){var l;t&1&&s!==(s=e[0].status+"")&&E(r,s),t&1&&p!==(p=((l=e[0].error)==null?void 0:l.message)+"")&&E(c,p)},i:$,o:$,d(e){e&&(m(a),m(o),m(n))}}}function P(i,a,s){let r;return k(i,C,o=>s(0,r=o)),[r]}class B extends q{constructor(a){super(),y(this,a,P,H,x,{})}}export{B as component}; 2 | -------------------------------------------------------------------------------- /examples/example-reactjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo_for_reactjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^18.2.0", 7 | "react-dom": "^18.2.0", 8 | "react-scripts": "5.0.1", 9 | "svelte-gantt": "file:../../dist" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": [ 19 | "react-app" 20 | ] 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/styles/fonts.css: -------------------------------------------------------------------------------- 1 | /* @font-face { 2 | font-family: 'Inter VF'; 3 | font-weight: 100 900; 4 | font-display: swap; 5 | font-style: normal; 6 | font-named-instance: 'Regular'; 7 | src: url('$fonts/Inter-VF.roman-latin.woff2') format('woff2'); 8 | } 9 | 10 | @font-face { 11 | font-family: 'Inter VF'; 12 | font-weight: 100 900; 13 | font-display: swap; 14 | font-style: italic; 15 | font-named-instance: 'Italic'; 16 | src: url('$fonts/Inter-VF.italic-latin.woff2') format('woff2'); 17 | } 18 | 19 | @font-face { 20 | font-family: 'Fira Code VF'; 21 | font-weight: 300 700; 22 | font-style: normal; 23 | src: url('$fonts/FiraCode-VF.woff2') format('woff2-variations'), 24 | url('$fonts/FiraCode-VF.woff') format('woff-variations'); 25 | } */ 26 | 27 | .font-mono { 28 | font-variant-ligatures: none; 29 | } 30 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/each.DqwAsWNO.js: -------------------------------------------------------------------------------- 1 | import{t as z,a as B}from"./index.DyGm78TJ.js";import{A as C}from"./scheduler.lruobs1Y.js";function G(n){return(n==null?void 0:n.length)!==void 0?n:Array.from(n)}function H(n,o){z(n,1,1,()=>{o.delete(n.key)})}function I(n,o,S,D,x,g,f,j,p,k,w,q){let i=n.length,d=g.length,c=i;const a={};for(;c--;)a[n[c].key]=c;const h=[],u=new Map,m=new Map,M=[];for(c=d;c--;){const e=q(x,g,c),s=S(e);let t=f.get(s);t?M.push(()=>t.p(e,o)):(t=k(s,e),t.c()),u.set(s,h[c]=t),s in a&&m.set(s,Math.abs(c-a[s]))}const v=new Set,A=new Set;function y(e){B(e,1),e.m(j,w),f.set(e.key,e),w=e.first,d--}for(;i&&d;){const e=h[d-1],s=n[i-1],t=e.key,l=s.key;e===s?(w=e.first,i--,d--):u.has(l)?!f.has(t)||v.has(t)?y(e):A.has(l)?i--:m.get(t)>m.get(l)?(A.add(t),y(e)):(v.add(l),i--):(p(s,f),i--)}for(;i--;){const e=n[i];u.has(e.key)||p(e,f)}for(;d;)y(h[d-1]);return C(M),h}export{G as e,H as o,I as u}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/3.D4zGWEJI.css: -------------------------------------------------------------------------------- 1 | .example.svelte-1decuf8 .task-pink{--tw-bg-opacity:1;background-color:rgb(219 39 119 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.example.svelte-1decuf8 .task-pink:hover{--tw-bg-opacity:1;background-color:rgb(157 23 77 / var(--tw-bg-opacity))}.example.svelte-1decuf8 .task-slate{--tw-bg-opacity:1;background-color:rgb(148 163 184 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.example.svelte-1decuf8 .task-slate:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.example.svelte-1decuf8 .task-blue{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.example.svelte-1decuf8 .task-blue:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.D4zGWEJI.css: -------------------------------------------------------------------------------- 1 | .example.svelte-1decuf8 .task-pink{--tw-bg-opacity:1;background-color:rgb(219 39 119 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.example.svelte-1decuf8 .task-pink:hover{--tw-bg-opacity:1;background-color:rgb(157 23 77 / var(--tw-bg-opacity))}.example.svelte-1decuf8 .task-slate{--tw-bg-opacity:1;background-color:rgb(148 163 184 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.example.svelte-1decuf8 .task-slate:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.example.svelte-1decuf8 .task-blue{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.example.svelte-1decuf8 .task-blue:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))} 2 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/entities/Row.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    18 | {#if row.model.contentHtml} 19 | {@html row.model.contentHtml} 20 | {/if} 21 |
    22 | 23 | 30 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/styles/vars.css: -------------------------------------------------------------------------------- 1 | :root, 2 | .prefers-light-scheme { 3 | --sg-color-focus: 79 70 229; 4 | --sg-color-soft: 68 78 94; 5 | --sg-color-body: 250 250 250; 6 | --sg-color-elevate: 243 244 246; 7 | --sg-color-inverse: 5 11 23; 8 | --sg-color-border: 209 213 219; 9 | } 10 | 11 | :root { 12 | font-size: 16px; 13 | scroll-padding-top: 6rem; 14 | --sg-breadcrumbs-height: 5rem; 15 | --sg-article-max-width: 98ch; 16 | } 17 | 18 | @media screen and (min-width: 992px) { 19 | :root { 20 | --sg-breadcrumbs-height: 0px; 21 | } 22 | } 23 | 24 | @media screen and (min-width: 1460px) { 25 | :root { 26 | } 27 | } 28 | 29 | :root.dark, 30 | .prefers-dark-scheme { 31 | color-scheme: dark; 32 | --sg-color-soft: 150 155 166; 33 | --sg-color-inverse: 245 245 245; 34 | --sg-color-border: 38 48 64; 35 | --sg-color-elevate: 10 19 33; 36 | --sg-color-body: 5 11 23; 37 | --sg-color-focus: 129 140 248; 38 | } 39 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/A.201zTarD.js: -------------------------------------------------------------------------------- 1 | import{s as _,q as h,e as m,c,b as d,f,r as o,i as p,v as b,w as $,x as g}from"./scheduler.lruobs1Y.js";import{S as v,i as q,a as A,t as S}from"./index.DyGm78TJ.js";import{b as u}from"./paths.oQcPQ3IF.js";function W(a){let s,n,r;const i=a[2].default,t=h(i,a,a[1],null);return{c(){s=m("a"),t&&t.c(),this.h()},l(e){s=c(e,"A",{href:!0});var l=d(s);t&&t.l(l),l.forEach(f),this.h()},h(){o(s,"href",n=a[0].startsWith("/")?`${u}${a[0]}`:a[0])},m(e,l){p(e,s,l),t&&t.m(s,null),r=!0},p(e,[l]){t&&t.p&&(!r||l&2)&&b(t,i,e,e[1],r?g(i,e[1],l,null):$(e[1]),null),(!r||l&1&&n!==(n=e[0].startsWith("/")?`${u}${e[0]}`:e[0]))&&o(s,"href",n)},i(e){r||(A(t,e),r=!0)},o(e){S(t,e),r=!1},d(e){e&&f(s),t&&t.d(e)}}}function w(a,s,n){let{$$slots:r={},$$scope:i}=s,{href:t}=s;return a.$$set=e=>{"href"in e&&n(0,t=e.href),"$$scope"in e&&n(1,i=e.$$scope)},[t,i,r]}class k extends v{constructor(s){super(),q(this,s,w,W,_,{href:0})}}export{k as A}; 2 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/utils/contextMenuManager.ts: -------------------------------------------------------------------------------- 1 | import { ContextMenu } from '../ui'; 2 | 3 | export class ContextMenuManager { 4 | current: ContextMenu; 5 | 6 | constructor() { 7 | this.current = null; 8 | } 9 | 10 | open(actions, position) { 11 | if (this.current) { 12 | this.current.$destroy(); 13 | } 14 | 15 | const contextMenu = new ContextMenu({ 16 | target: document.body, 17 | props: { 18 | actions, 19 | left: position.x, 20 | top: position.y, 21 | onactionend: () => contextMenu.$destroy() 22 | } 23 | }); 24 | 25 | this.current = contextMenu; 26 | return this.current; 27 | } 28 | 29 | close() { 30 | if (this.current) { 31 | this.current.$destroy(); 32 | this.current = null; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/demo/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": false, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "paths": { 13 | "$lib":["./src/lib"], 14 | "$lib/*":["./src/lib/*"], 15 | "$dist": ["../svelte-gantt/dist"], 16 | "$dist/*": ["../svelte-gantt/dist/*"], 17 | "svelte-gantt": ["../svelte-gantt/dist"], 18 | "svelte-gantt/*": ["../svelte-gantt/dist/*"] 19 | } 20 | } 21 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files 22 | // 23 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 24 | // from the referenced tsconfig.json - TypeScript does not merge them in 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/GithubIcon.svelte: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/table/+page.svx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Table 3 | headers: 4 | --- 5 | 6 | 9 | 10 | 11 | # Table 12 | 13 | Display row information in a table on the side. 14 | 15 | ## Table Header 16 | 17 | Represents a single column rendered in SvelteGanttTable. 18 | 19 | - `title` (`string`) Label to display in the table column header. 20 | - `property` (`string`) Property of row to display in table column cells. 21 | - `width` (`number`) Width of table column, in px. 22 | 23 | 24 | 25 | --- 26 | 27 | ```js 28 | import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt'; 29 | 30 | // ... 31 | 32 | gantt.$set({ 33 | tableHeaders: [ 34 | { title: 'Name', property: 'label', width: 150 }, 35 | { title: 'Age', property: 'age', width: 50 }, 36 | ], 37 | ganttTableModules: [SvelteGanttTable], 38 | }); 39 | ``` 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-gantt-monorepo", 3 | "description": "monorepo for svelte-gantt", 4 | "private": true, 5 | "version": "0.0.1", 6 | "author": "Ante Novokmet ", 7 | "type": "module", 8 | "scripts": { 9 | "dev:docs": "pnpm --filter docs-mdsvex run dev", 10 | "build:docs": "pnpm --filter docs-mdsvex run build", 11 | "dev:demo": "pnpm --filter demo run dev", 12 | "dev:svelte-gantt": "pnpm --filter svelte-gantt run autobuild", 13 | "playground": "run-p dev:demo dev:svelte-gantt" 14 | }, 15 | "devDependencies": { 16 | "@typescript-eslint/eslint-plugin": "^6.7.4", 17 | "@typescript-eslint/parser": "^6.7.4", 18 | "eslint": "^8.50.0", 19 | "eslint-config-prettier": "^9.0.0", 20 | "eslint-plugin-svelte": "^2.34.0", 21 | "prettier": "^3.0.3", 22 | "prettier-plugin-svelte": "^3.0.3", 23 | "typescript": "^5.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/index.js: -------------------------------------------------------------------------------- 1 | // place files you want to import through the `$lib` alias in this folder. 2 | export { default as NavBar } from './components/NavBar.svelte'; 3 | 4 | // place files you want to import through the `$lib` alias in this folder. 5 | import moment from 'moment'; 6 | import { SvelteGanttTable, MomentSvelteGanttDateAdapter } from 'svelte-gantt'; 7 | 8 | export function time(input) { 9 | return moment(input, 'HH:mm'); 10 | } 11 | 12 | export function format(input, fmt) { 13 | return moment(input).format(fmt); 14 | } 15 | 16 | export const defaultOptions = { 17 | dateAdapter: new MomentSvelteGanttDateAdapter(moment), 18 | rows: [], 19 | tasks: [], 20 | headers: [ 21 | { unit: 'day', format: 'MMMM Do' }, 22 | { unit: 'hour', format: 'H:mm' } 23 | ], 24 | fitWidth: true, 25 | minWidth: 400, 26 | from: time('06:00'), 27 | to: time('14:00'), 28 | 29 | tableHeaders: [{ title: 'Label', property: 'label', width: 140, type: 'tree' }], 30 | tableWidth: 180, 31 | ganttTableModules: [SvelteGanttTable] 32 | }; 33 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/7.zCu19reB.css: -------------------------------------------------------------------------------- 1 | .example.svelte-134mm6g .gradient{border-radius:.375rem;background-image:linear-gradient(to top right,var(--tw-gradient-stops));--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:rgb(236 72 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#8b5cf6 var(--tw-gradient-to-position);background-size:unset!important}.example.svelte-134mm6g .gradient:hover{border-radius:.375rem;background-image:linear-gradient(to top right,var(--tw-gradient-stops));--tw-gradient-from:#db2777 var(--tw-gradient-from-position);--tw-gradient-to:rgb(219 39 119 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#7c3aed var(--tw-gradient-to-position);--tw-shadow:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.zCu19reB.css: -------------------------------------------------------------------------------- 1 | .example.svelte-134mm6g .gradient{border-radius:.375rem;background-image:linear-gradient(to top right,var(--tw-gradient-stops));--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:rgb(236 72 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#8b5cf6 var(--tw-gradient-to-position);background-size:unset!important}.example.svelte-134mm6g .gradient:hover{border-radius:.375rem;background-image:linear-gradient(to top right,var(--tw-gradient-stops));--tw-gradient-from:#db2777 var(--tw-gradient-from-position);--tw-gradient-to:rgb(219 39 119 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#7c3aed var(--tw-gradient-to-position);--tw-shadow:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)} 2 | -------------------------------------------------------------------------------- /packages/demo/src/components/DateTime.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 41 | 42 |
    43 | 44 | 45 |
    -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/data/rows/RowsExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | Custom html content
    ' }, 12 | {id: 4, headerHtml: '
    This time in header
    ' }, 13 | ]} 14 | ganttTableModules={[SvelteGanttTable]} 15 | /> 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/example-svelte/src/components/DateTime.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 41 | 42 |
    43 | 44 | 45 |
    -------------------------------------------------------------------------------- /examples/example-sveltekit/src/components/DateTime.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 41 | 42 |
    43 | 44 | 45 |
    -------------------------------------------------------------------------------- /docs/_app/immutable/assets/5.HrAC0il4.css: -------------------------------------------------------------------------------- 1 | .example.svelte-ovg8kz .sg-tree-expander .fa-angle-right:before{display:block;content:url('data:image/svg+xml; utf8, ');width:1rem;height:1rem}.example.svelte-ovg8kz .sg-tree-expander .fa-angle-down:before{display:block;content:url('data:image/svg+xml; utf8, ');width:1rem;height:1rem}.example.svelte-199ryr9 .row-gradient{background-image:linear-gradient(to top right,var(--tw-gradient-stops));--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:rgb(236 72 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#8b5cf6 var(--tw-gradient-to-position);opacity:.5} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.HrAC0il4.css: -------------------------------------------------------------------------------- 1 | .example.svelte-ovg8kz .sg-tree-expander .fa-angle-right:before{display:block;content:url('data:image/svg+xml; utf8, ');width:1rem;height:1rem}.example.svelte-ovg8kz .sg-tree-expander .fa-angle-down:before{display:block;content:url('data:image/svg+xml; utf8, ');width:1rem;height:1rem}.example.svelte-199ryr9 .row-gradient{background-image:linear-gradient(to top right,var(--tw-gradient-stops));--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:rgb(236 72 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#8b5cf6 var(--tw-gradient-to-position);opacity:.5} 2 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/create-tasks/+page.svx: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | # Create tasks 7 | 8 | Using the following options, tasks can be created by dragging on the chart: 9 | 10 | - `enableCreateTask` (`boolean`) - Set to `true` to enable task creation. 11 | - `onCreateTask` (`Function`) - Triggers at the moment when a new task has started being dragged. It should return the new tasks model. 12 | - `onCreatedTask` (`Function`) - Triggers after task has been successfully created. 13 | 14 | 15 | 16 | 17 | 18 | --- 19 | 20 | ```js 21 | import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt'; 22 | 23 | // ... 24 | let id = 0; 25 | 26 | gantt.$set({ 27 | enableCreateTask: true, 28 | onCreateTask: (data) => { 29 | id++; 30 | return { 31 | id: id, 32 | label: `New task ${id}`, 33 | ...data 34 | }; 35 | }, 36 | onCreatedTask: (task) => { 37 | console.log('task created', task); 38 | } 39 | }); 40 | ``` 41 | -------------------------------------------------------------------------------- /packages/demo/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /examples/example-sveltekit/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /packages/svelte-gantt/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import uglify from 'rollup-plugin-uglify'; 5 | import sveltePreprocess from 'svelte-preprocess'; 6 | import typescript from '@rollup/plugin-typescript'; 7 | import postcss from 'rollup-plugin-postcss'; 8 | 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | export default { 12 | input: 'src/index.ts', 13 | output: { 14 | sourcemap: true, 15 | format: 'es', 16 | name: 'window', 17 | extend: true, 18 | dir: 'dist' 19 | }, 20 | plugins: [ 21 | svelte({ 22 | // css: css => { 23 | // css.write('docs/dist/svelteGantt.css'); 24 | // }, 25 | emitCss: true, 26 | preprocess: sveltePreprocess() 27 | }), 28 | postcss(), 29 | resolve({ 30 | browser: true 31 | // exportConditions: ['svelte'] 32 | }), 33 | commonjs(), 34 | typescript(), 35 | production && uglify() 36 | ] 37 | }; 38 | -------------------------------------------------------------------------------- /docs/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/core/timeRange.ts: -------------------------------------------------------------------------------- 1 | import type { ColumnService } from './column'; 2 | 3 | export interface TimeRangeModel { 4 | id: number; // | string; 5 | from: any; // date 6 | to: any; // date 7 | 8 | classes?: string | string[]; 9 | label?: string; 10 | resizable?: boolean; 11 | } 12 | 13 | export interface SvelteTimeRange { 14 | model: TimeRangeModel; 15 | left: number; 16 | width: number; 17 | resizing: boolean; 18 | } 19 | 20 | export class TimeRangeFactory { 21 | columnService: ColumnService; 22 | 23 | constructor(columnService: ColumnService) { 24 | this.columnService = columnService; 25 | } 26 | 27 | create(model: TimeRangeModel): SvelteTimeRange { 28 | // enable dragging 29 | model.resizable = model.resizable === undefined ? true : model.resizable; 30 | 31 | const left = this.columnService.getPositionByDate(model.from); 32 | const right = this.columnService.getPositionByDate(model.to); 33 | 34 | return { 35 | model, 36 | left: left, 37 | width: right - left, 38 | resizing: false 39 | }; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | {title} 21 | 22 | 23 |
    24 |
    29 | (isNavPopoverOpen = true)} on:close-popover={() => (isNavPopoverOpen = false)} on:open={() => ($isSidebarOpen = true)}> 30 |
    31 | 32 | 33 |
    34 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/static/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/dependencies/+page.svx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## Dependencies 5 | 6 | Renders a dependency between two tasks. Used by `SvelteGanttDependencies` module: 7 | 8 | ```js 9 | import { SvelteGanttDependencies } from 'svelte-gantt'; 10 | 11 | gantt.$set({ 12 | dependencies: [ 13 | { 14 | id: 1, 15 | fromId: 1, 16 | toId: 2 17 | } 18 | ], 19 | ganttBodyModules: [SvelteGanttDependencies] 20 | }); 21 | ``` 22 | 23 | Gantt props: 24 | 25 | | Name | Type | Description | Default | 26 | | - | - | - | -: | 27 | `dependencies` | `object[]` | List of dependencies. 28 | 29 | 30 | Each dependency contains these fields: 31 | 32 | | Name | Type | Description | Default | 33 | | - | - | - | -: | 34 | `id` | `number | string` | Unique id of dependency. **(required)** 35 | `fromId` | `number | string` | Id of dependent task. **(required)** 36 | `toId` | `number | string` | Id of dependency task. **(required)** 37 | `stroke` | `string` | Stroke color, eg. `'red'` or `'#ff0000'` 38 | `strokeWidth` | `number` | Width of stroke. 39 | `arrowSize` | `number` | Size of the arrow head. 40 | 41 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2015-2016 Konstantin Tarkus, Kriasoft LLC. All rights reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/data/time-ranges/TimeRangesExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 38 |
    39 | 40 | 49 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/ui/ContextMenu.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 | {#each actions as action} 20 |
    execute(event, action)}>{action.label}
    21 | {/each} 22 |
    23 | 24 | 45 | -------------------------------------------------------------------------------- /packages/svelte-gantt/LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2015-2016 Konstantin Tarkus, Kriasoft LLC. All rights reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/demo/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-static'; 2 | import path from 'path'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | kit: { 7 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 8 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 9 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 10 | adapter: adapter({ 11 | // default options are shown. On some platforms 12 | // these options are set automatically — see below 13 | pages: process.env.NODE_ENV === 'production' ? '../docs' : 'build', 14 | fallback: '404.html', 15 | precompress: false, 16 | strict: true 17 | }), 18 | paths: { 19 | relative: true, 20 | base: process.env.NODE_ENV === 'production' ? '/svelte-gantt' : '', 21 | }, 22 | alias: { 23 | '$dist': path.resolve('../svelte-gantt/dist'), 24 | 'svelte-gantt': path.resolve('../svelte-gantt/dist'), 25 | } 26 | } 27 | }; 28 | 29 | export default config; 30 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/create-tasks/CreateTasksExample.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
    24 |
    25 | Click and drag on the timeline to create a task. 26 |
    27 | 28 | 45 |
    46 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/store.CCmTIowZ.js: -------------------------------------------------------------------------------- 1 | import{d as o,w as n}from"./entry.0-2BfHub.js";import{p as d}from"./stores.BxMDhJ8m.js";const p=n(!1);let l=[{title:"Getting started",pages:[{href:"/docs/getting-started/installation",label:"Installation"},{href:"/docs/getting-started/migrating",label:"Migrating"}]},{title:"Data",pages:[{href:"/docs/data/rows",label:"Rows"},{href:"/docs/data/tasks",label:"Tasks"},{href:"/docs/data/time-ranges",label:"Time ranges"}]},{title:"Options",pages:[{href:"/docs/options/gantt",label:"Gantt"},{href:"/docs/options/columns",label:"Columns"},{href:"/docs/options/headers",label:"Headers"},{href:"/docs/options/zoom",label:"Zoom"},{href:"/docs/options/layout",label:"Layout"}]},{title:"Modules",pages:[{href:"/docs/modules/dependencies",label:"Dependencies"},{href:"/docs/modules/table",label:"Table"},{href:"/docs/modules/external",label:"External"},{href:"/docs/modules/create-tasks",label:"Create tasks"}]}];const r=o([d],([e])=>{for(const a of l)for(const s of a.pages)if(e.url.pathname.includes(s.href))return{category:a,page:s};return{}}),t=l.flatMap(e=>e.pages),c=o([r],([e])=>{if(!e.page)return null;const a=t.findIndex(s=>s.href==e.page.href);return t[a-1]}),g=o([r],([e])=>{if(!e.page)return null;const a=t.findIndex(s=>s.href==e.page.href);return t[a+1]});export{c as a,p as i,r as m,g as n,l as p}; 2 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/icons/SvelteGanttLogo.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/entities/TimeRange.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    17 | {#if model.label} 18 |
    {model.label}
    19 | {/if} 20 |
    21 | 22 | 51 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs-mdsvex", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "lint": "prettier --check . && eslint .", 10 | "format": "prettier --write ." 11 | }, 12 | "devDependencies": { 13 | "@prosopo/vite-plugin-watch-workspace": "^0.3.40", 14 | "@sveltejs/adapter-auto": "^3.0.0", 15 | "@sveltejs/adapter-static": "^2.0.3", 16 | "@sveltejs/kit": "^2.0.0", 17 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 18 | "@tailwindcss/typography": "^0.5.13", 19 | "@types/eslint": "^8.56.0", 20 | "autoprefixer": "^10.4.19", 21 | "eslint": "^8.56.0", 22 | "eslint-config-prettier": "^9.1.0", 23 | "eslint-plugin-svelte": "^2.35.1", 24 | "mdsvex": "^0.11.0", 25 | "postcss": "^8.4.38", 26 | "prettier": "^3.1.1", 27 | "prettier-plugin-svelte": "^3.1.2", 28 | "prism-themes": "^1.9.0", 29 | "rehype-autolink-headings": "^7.1.0", 30 | "rehype-slug": "^6.0.0", 31 | "remark-extended-table": "^2.0.2", 32 | "remark-gfm": "^4.0.0", 33 | "svelte": "^4.2.7", 34 | "svelte-gantt": "workspace:*", 35 | "tailwindcss": "^3.4.3", 36 | "typescript": "^5.0.0", 37 | "vite": "^5.0.3", 38 | "yaml": "^2.4.3" 39 | }, 40 | "type": "module", 41 | "dependencies": { 42 | "moment": "^2.30.1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/external/ExternalExample.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 |
    33 |
    34 |
    35 | Drag to gantt 36 |
    37 |
    38 | 39 | 52 |
    53 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/core/drag/DragContext.ts: -------------------------------------------------------------------------------- 1 | import type { DownDropEvent } from './draggable'; 2 | import type { SvelteTask } from '../task'; 3 | import type { SvelteRow } from '../row'; 4 | import type { Readable } from 'svelte/store'; 5 | 6 | export interface DragContext { 7 | rootState: Readable<{ [taskId: PropertyKey]: State; }>; 8 | off(taskId: PropertyKey); 9 | save(start: { x: number; y: number; width: number; }, task: SvelteTask, event: DownDropEvent); 10 | dropAll(event: DownDropEvent): void; 11 | moveAll(data: { x?: number; y?: number; width?: number; event?: MouseEvent }, task: SvelteTask, state: State); 12 | setState(task: SvelteTask, state: State); 13 | dragAllowed(task: SvelteTask): boolean; 14 | resizeAllowed(task: SvelteTask): boolean; 15 | mouseUp(task: SvelteTask); 16 | } 17 | 18 | export type Position = { 19 | left: number; 20 | top: number; 21 | width: number; 22 | from: number; 23 | to: number; 24 | } 25 | 26 | export type DragChange = { 27 | valid: boolean; 28 | task: SvelteTask; 29 | current: Position; 30 | previous: Position; 31 | sourceRow: SvelteRow; 32 | targetRow: SvelteRow; 33 | } 34 | 35 | export type State = Partial<{ 36 | dragging: boolean; 37 | resizing: boolean; 38 | x: number; 39 | y: number; 40 | width: number; 41 | /** @deprecated */ 42 | ignoreClick: boolean; 43 | }>; -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/options/headers/+page.svx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Headers 3 | --- 4 | 5 | # Header 6 | 7 | Represents a row of header cells that render over the gantt. 8 | 9 | 10 | | Name | Type | Description | Default | 11 | | - | - | - | -: | 12 | `unit` | `string` | Time unit used to display header cells, eg. `'day'` will create a cell in the header for each day in the timeline. 13 | `format` | `string` | Datetime format used to label header cells, eg. `'DD.MM.YYYY'`, `'HH'` 14 | `offset` | `number` | Duration width of header cell. 15 | `sticky` | `boolean` | Use sticky positioning for header labels. 16 | 17 | ### Formatting 18 | 19 | By default `svelte-gantt` is only able to format a small set of date templates, eg. `'HH:mm'`. For more you can use `MomentSvelteGanttDateAdapter` as `dateAdapter`: 20 | 21 | ```js 22 | import { MomentSvelteGanttDateAdapter } from 'svelte-gantt'; 23 | import moment from 'Moment'; 24 | 25 | const options = { 26 | dateAdapter: new MomentSvelteGanttDateAdapter(moment) 27 | // ... 28 | } 29 | ``` 30 | 31 | ...or a custom one, as long as it implements the interface `{ format(date: number, format: string): string; }`. 32 | 33 | 34 | ```js 35 | import dayjs from 'dayjs'; 36 | 37 | const options = { 38 | dateAdapter: { 39 | format(date, format) { 40 | return dayjs(date).format(format); 41 | } 42 | }, 43 | // ... 44 | } 45 | ``` -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/SideBar.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 39 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:@typescript-eslint/recommended', 6 | 'plugin:svelte/recommended', 7 | 'prettier' 8 | ], 9 | rules: { 10 | indent: ['warn', 4, { SwitchCase: 1 }], 11 | quotes: ['warn', 'single'], 12 | 'prefer-rest-params': 'off', 13 | 'svelte/valid-compile': 'off', 14 | 'svelte/no-at-html-tags': 'off', 15 | '@typescript-eslint/no-unused-vars': [ 16 | 'error', 17 | { 18 | argsIgnorePattern: '_', 19 | varsIgnorePattern: '_', 20 | caughtErrorsIgnorePattern: '_' 21 | } 22 | ] 23 | }, 24 | parser: '@typescript-eslint/parser', 25 | plugins: ['@typescript-eslint'], 26 | parserOptions: { 27 | sourceType: 'module', 28 | ecmaVersion: 2020, 29 | extraFileExtensions: ['.svelte'] 30 | }, 31 | env: { 32 | browser: true, 33 | es2017: true, 34 | node: true 35 | }, 36 | overrides: [ 37 | { 38 | files: ['*.svelte'], 39 | parser: 'svelte-eslint-parser', 40 | parserOptions: { 41 | parser: '@typescript-eslint/parser' 42 | } 43 | }, 44 | { 45 | files: ['src/**/*'], 46 | rules: { 47 | 'no-console': ['error', { allow: ['warn', 'error'] }] 48 | } 49 | } 50 | ] 51 | }; 52 | -------------------------------------------------------------------------------- /packages/svelte-gantt/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:@typescript-eslint/recommended', 6 | 'plugin:svelte/recommended', 7 | 'prettier' 8 | ], 9 | rules: { 10 | indent: ['warn', 4, { SwitchCase: 1 }], 11 | quotes: ['warn', 'single'], 12 | 'prefer-rest-params': 'off', 13 | 'svelte/valid-compile': 'off', 14 | 'svelte/no-at-html-tags': 'off', 15 | '@typescript-eslint/no-unused-vars': [ 16 | 'error', 17 | { 18 | argsIgnorePattern: '_', 19 | varsIgnorePattern: '_', 20 | caughtErrorsIgnorePattern: '_' 21 | } 22 | ] 23 | }, 24 | parser: '@typescript-eslint/parser', 25 | plugins: ['@typescript-eslint'], 26 | parserOptions: { 27 | sourceType: 'module', 28 | ecmaVersion: 2020, 29 | extraFileExtensions: ['.svelte'] 30 | }, 31 | env: { 32 | browser: true, 33 | es2017: true, 34 | node: true 35 | }, 36 | overrides: [ 37 | { 38 | files: ['*.svelte'], 39 | parser: 'svelte-eslint-parser', 40 | parserOptions: { 41 | parser: '@typescript-eslint/parser' 42 | } 43 | }, 44 | { 45 | files: ['src/**/*'], 46 | rules: { 47 | 'no-console': ['error', { allow: ['warn', 'error'] }] 48 | } 49 | } 50 | ] 51 | }; 52 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/core/events.ts: -------------------------------------------------------------------------------- 1 | type DelegatedCallback = (e: MouseEvent, data: string, target: Element) => void; 2 | 3 | export function createDelegatedEventDispatcher() { 4 | const callbacks: { [type: string]: { [attr: string]: DelegatedCallback } } = {}; 5 | 6 | return { 7 | onDelegatedEvent(type, attr, callback: DelegatedCallback) { 8 | if (!callbacks[type]) callbacks[type] = {}; 9 | callbacks[type][attr] = callback; 10 | }, 11 | 12 | offDelegatedEvent(type, attr) { 13 | delete callbacks[type][attr]; 14 | }, 15 | 16 | onEvent(e: MouseEvent) { 17 | const { type, target } = e; 18 | const cbs = callbacks[type]; 19 | if (!cbs) return; 20 | 21 | let match; 22 | let element = target as Element; 23 | while (element && element != e.currentTarget) { 24 | if ((match = matches(cbs, element))) { 25 | break; 26 | } 27 | element = element.parentElement; 28 | } 29 | if (match && cbs[match.attr]) { 30 | cbs[match.attr](e, match.data, element); 31 | } else if (cbs['empty']) { 32 | cbs['empty'](e, null, element); 33 | } 34 | } 35 | }; 36 | } 37 | 38 | function matches(cbs, element) { 39 | let data; 40 | for (const attr in cbs) { 41 | if ((data = element.getAttribute(attr))) { 42 | return { attr, data }; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/modules/external/+page.svx: -------------------------------------------------------------------------------- 1 | 4 | 5 | # External draggable 6 | 7 | Enables external DOM elements to be draggable to svelte-gantt. Useful for creating new tasks: 8 | 9 | ```js 10 | new SvelteGanttExternal( 11 | // external DOM element 12 | document.getElementById('newTaskButton'), 13 | // options 14 | { 15 | // reference to instance of svelte-gantt 16 | gantt, 17 | // if enabled 18 | enabled: true, 19 | // success callback 20 | // row: row element was dropped on 21 | // date: date element was dropped on 22 | // gantt: instance of svelte-gantt 23 | onsuccess: (row, date, gantt) => { 24 | // here you can add a task to row, see './public/main.js' 25 | }, 26 | // called when dragged outside main gantt area 27 | onfail: () => {}, 28 | // factory function, creates HTMLElement that will follow the mouse 29 | elementContent: () => { 30 | const element = document.createElement('div'); 31 | element.innerHTML = 'New Task'; 32 | Object.assign(element.style, { 33 | position: 'absolute', 34 | background: '#eee', 35 | padding: '0.5em 1em', 36 | fontSize: '12px', 37 | pointerEvents: 'none' 38 | }); 39 | return element; 40 | } 41 | } 42 | ); 43 | ``` 44 | 45 | --- 46 | 47 | 48 | -------------------------------------------------------------------------------- /packages/svelte-gantt/src/modules/dependencies/GanttDependencies.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 |
    35 | {#each visibleDependencies as dependency (dependency.id)} 36 | 37 | {/each} 38 |
    39 | 40 | 53 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/data/tasks/TasksExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | Html content' }, 23 | { id: 5, resourceId: 5, from: time('10:30'), to: time('12:00'), label: 'Resizable but not draggable', enableDragging: false }, 24 | { id: 6, resourceId: 6, from: time('11:00'), to: time('12:30'), label: 'Draggable but not resizable', enableResize: false } 25 | ]} 26 | /> 27 |
    28 | 29 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 37 |
    38 | 39 | 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | !.vscodesettings.json 3 | !.vscodetasks.json 4 | !.vscodelaunch.json 5 | !.vscodeextensions.json 6 | 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # TypeScript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | # parcel-bundler cache (https://parceljs.org/) 67 | .cache 68 | 69 | # next.js build output 70 | .next 71 | 72 | # nuxt.js build output 73 | .nuxt 74 | 75 | # vuepress build output 76 | .vuepress/dist 77 | 78 | # Serverless directories 79 | .serverless 80 | 81 | #secrets 82 | to do.txt 83 | 84 | #.rpt2_cache 85 | .rpt2_cache/ 86 | 87 | # npm published files 88 | dist/ 89 | !docs/dist 90 | 91 | # svelte 92 | /.svelte-kit -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/data/time-ranges/+page.svx: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | # Time range 8 | 9 | Renders a block of time spanning all the rows. 10 | 11 | | Name | Description | Type | Default | 12 | | - | - | - | -: | 13 | | `id` | Unique id of time range. | `number`\|`string` | undefined | 14 | |`from` | Datetime timeRange starts on.| `number` | undefined | 15 | | `to` | Datetime timeRange ends on. | `number` | undefined | 16 | | `classes`| Custom CSS classes. | `string`\|`Array` | undefined | 17 | | `label` | Display label. | `string` | undefined | 18 | | `resizable` | Should the time range be resizable. | `boolean` | false | 19 | 20 | ```js 21 | const options = { 22 | // ... 23 | timeRanges: [ 24 | { 25 | id: 2, 26 | from: new Date('2024-02-01T08:00:00').valueOf(), 27 | to: new Date('2024-02-01T09:00:00').valueOf(), 28 | label: 'Breakfast' 29 | }, 30 | { 31 | id: 1, 32 | from: new Date('2024-02-01T10:00:00').valueOf(), 33 | to: new Date('2024-02-01T11:00:00').valueOf(), 34 | classes: 'time-range-lunch', 35 | label: 'Lunch', 36 | resizable: false, 37 | }, 38 | { 39 | id: 3, 40 | from: new Date('2024-02-01T11:00:00').valueOf(), 41 | to: new Date('2024-02-01T12:00:00').valueOf(), 42 | label: 'Custom class', 43 | classes: 'gradient', 44 | } 45 | ] 46 | } 47 | ``` 48 | 49 | 50 | -------------------------------------------------------------------------------- /packages/svelte-gantt/.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | !.vscodesettings.json 3 | !.vscodetasks.json 4 | !.vscodelaunch.json 5 | !.vscodeextensions.json 6 | 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # TypeScript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | # parcel-bundler cache (https://parceljs.org/) 67 | .cache 68 | 69 | # next.js build output 70 | .next 71 | 72 | # nuxt.js build output 73 | .nuxt 74 | 75 | # vuepress build output 76 | .vuepress/dist 77 | 78 | # Serverless directories 79 | .serverless 80 | 81 | #secrets 82 | to do.txt 83 | 84 | #.rpt2_cache 85 | .rpt2_cache/ 86 | 87 | # npm published files 88 | dist/ 89 | !docs/dist 90 | 91 | # svelte 92 | /.svelte-kit -------------------------------------------------------------------------------- /packages/svelte-gantt/src/ui/Resizer.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 |
    42 | 43 | 62 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/lib/components/Button.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | {#if isButton} 25 | 34 | {:else} 35 | 36 | 37 | {#if arrow === 'left'} 38 | <- 39 | {/if} 40 | 41 | {#if arrow === 'right'} 42 | -> 43 | {/if} 44 | 45 | {/if} 46 | -------------------------------------------------------------------------------- /packages/docs-mdsvex/src/routes/docs/options/zoom/+page.svx: -------------------------------------------------------------------------------- 1 | 4 | 5 | # Zoom level 6 | 7 | To zoom the chart, a list of zoom levels (`zoomLevels`) can be provided. When using `wheel` + `ctrl` the options cycle. 8 | Each of the levels can have the following fields: 9 | 10 | | Name | Type | Description | Default | 11 | | - | - | - | -: | 12 | `headers` | `Header[]` | See above. 13 | `minWidth` | `number` | See above. 14 | `fitWidth` | `boolean` | See above. 15 | `columnUnit` | `string` | See above. 16 | `columnOffset` | `number` | See above. 17 | 18 | You can have as many zoom levels as you need. 19 | 20 | 21 | 22 | --- 23 | 24 | 25 | ```js 26 | gantt.$set({ 27 | zoomLevels: [ 28 | { 29 | headers: [{ unit: 'month', format: 'MMM YYYY' }], 30 | minWidth: 800, 31 | columnUnit: 'day', 32 | columnOffset: 1 33 | }, 34 | { 35 | headers: [ 36 | { unit: 'month', format: 'MMM YYYY' }, 37 | { unit: 'week', format: '[week] w' }, 38 | { unit: 'day', format: 'D' } 39 | ], 40 | minWidth: 3200, 41 | columnUnit: 'hour', 42 | columnOffset: 4 43 | }, 44 | { 45 | headers: [ 46 | { unit: 'day', format: 'MMM D, YYYY' }, 47 | { unit: 'hour', format: 'HH' } 48 | ], 49 | minWidth: 8000, 50 | columnUnit: 'hour', 51 | columnOffset: 2 52 | }, 53 | { 54 | headers: [ 55 | { unit: 'day', format: 'MMM D, YYYY' }, 56 | { unit: 'hour', format: 'HH' } 57 | ], 58 | minWidth: 16000, 59 | columnUnit: 'hour', 60 | columnOffset: 2 61 | }, 62 | { 63 | headers: [ 64 | { unit: 'day', format: 'MMM D, YYYY' }, 65 | { unit: 'hour', format: 'HH' } 66 | ], 67 | minWidth: 32000, 68 | columnUnit: 'hour', 69 | columnOffset: 2 70 | } 71 | ] 72 | }) 73 | ``` 74 | 75 | -------------------------------------------------------------------------------- /examples/example-svelte/src/App.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 39 | 40 |