Skip to content

Simple, interactive and highly customizable Gantt chart component for Vue 3

Notifications You must be signed in to change notification settings

projectleo/vue-ganttastic

 
 

Repository files navigation

Vue Ganttastic

Vue Ganttastic logo

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>

Guide and Docs

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

About

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

Support the project

Vue Ganttastic is a free open-source project I work on in my spare time. Buy me a beer and let's give a toast to open-source developers! 🍻

Screenshots

image

image

image

About

Simple, interactive and highly customizable Gantt chart component for Vue 3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 51.6%
  • Vue 44.8%
  • JavaScript 2.2%
  • HTML 1.1%
  • Shell 0.3%