Vue Ganttastic is a simple, interactive and highly customizable Gantt chart component for Vue 3.
- Vue 3 support
- TypeScript support (ships with out of the box type declarations)
- Interactivity (dynamic, movable and pushable bars)
- Reactivity / Responsiveness (when changes occur, bars are repositioned accordingly)
- Customization options (chart/bar styling, slots, event handlers etc.)
Using Vue 2? Check out Vue-Ganttastic v1.
For further guides and references, check out the official docs.
Install using
npm install @infectoone/vue-ganttastic
Then, initalize the plugin in the starting point of your app (most likely src/main.js):
import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@infectoone/vue-ganttastic'
...
createApp(App)
.use(ganttastic)
.mount('#app')This will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.
<template>
<g-gantt-chart
chart-start="2021-07-12 12:00"
chart-end="2021-07-14 12:00"
precision="hour"
bar-start="myBeginDate"
bar-end="myEndDate"
>
<g-gantt-row label="My row 1" :bars="row1BarList" />
<g-gantt-row label="My row 2" :bars="row2BarList" />
</g-gantt-chart>
</template>
<script setup>
import { ref } from "vue"
const row1BarList = ref([
{
myBeginDate: "2021-07-13 13:00",
myEndDate: "2021-07-13 19:00",
ganttBarConfig: {
// each bar must have a nested ganttBarConfig object ...
id: "unique-id-1", // ... and a unique "id" property
label: "Lorem ipsum dolor"
}
}
])
const row2BarList = ref([
{
myBeginDate: "2021-07-13 00:00",
myEndDate: "2021-07-14 02:00",
ganttBarConfig: {
id: "another-unique-id-2",
hasHandles: true,
label: "Hey, look at me",
style: {
// arbitrary CSS styling for your bar
background: "#e09b69",
borderRadius: "20px",
color: "black"
},
class: "foo" // you can also add CSS classes to your bars!
}
}
])
</script>Clone the project, make some changes, test your changes out, create a pull request with a short summary of what changes you made. Contributing is warmly welcomed!
To test your changes out before creating a pull request, create a build:
npm run build
To test out the build, you should create a tarball using:
npm pack
Then, place the tarball in some other test project and install the package from the tarball by using:
npm install <name_of_the_package>.tgz
License MIT
Author: Marko Žunić, BSc
GitHub Repository
In case you found the library useful, a little tip would be much appreciated!
BTC address:
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent