Vue Ganttastic

Vue Ganttastic is a simple, interactive and highly customizable Gantt chart component for Vue 3.

Features

Vue 3 support
TypeScript support (ships with out of the box type declarations)
Interactivity (dynamic, moveable, pushable bars with various event handlers)
Reactivity / Responsiveness (bars will be properly repositioned on width resize)
Customization options (chart and bar styling, changes in behavior, slots, event handlers etc.)
Day.js support (uses Day.js under the hood for date-time manipulation)

Using Vue 2? Check out Vue-Ganttastic v1.

Quickstart

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"
      }
    }
  }
])
</script>

Contributing

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

Guide and Docs

For further guides and references, check out the official docs.

About

License MIT
Author: Marko Žunić, BSc
GitHub Repository

Donate

In case you found the library useful, a little tip would be much appreciated!

BTC address: bc1qmz4gcewnarl6ldfz78x2htrf7ux6yvl3p2aqje

tezoi/vue-ganttastic