Simple Draggable Gantt Chart For Vue – Ganttastic

Ganttastic is a small Vue.js component to render a configurable, draggable Gantt chart on web applications.

Features:

• Time Grid
• Highlight rows on hover.
• Show/hide time-axis.
• Custom styles & themes.

Basic usage:

1. Import the Ganttastic component after installation.

import {GGanttChart, GGanttBar} from 'vue-ganttastic'

2. Add the component to the template and define your data for the Gantt chart.

<g-gantt-chart
  chart-start="2020-03-01 00:00"
  chart-end="2020-03-03 00:00"
>
  <g-gantt-row label="My row #1"/>
  <g-gantt-row label="My row #2"/>
  <g-gantt-row label="My row #3"/>
  ...
</g-gantt-chart>

export default {
  ...
  components:{
    GGanttChart,
    GGanttBar
  },
  data(){
    return{
      myChartStart: "2020-03-01 00:00"
      myChartEnd: "2020-03-02 00:00"
      myBars: [
        {
          myBarStart: "2020-03-01 01:30",
          myBarEnd: "2020-03-01 06:00"
        },
        {
          myBarStart: "2020-03-01 15:10",
          myBarEnd: "2020-03-01 20:00"
        }
      ]
    }
  }
  ...
}

3. Available props to config the Gantt chart.

// start date
chartStart: {type: String, default: moment().startOf("day").format("YYYY-MM-DD HH:mm:ss")},

// end date
chartEnd: {type: String, default: moment().startOf("day").add(12,"hours").format("YYYY-MM-DD HH:mm:ss")},

// hide or show time axis
hideTimeaxis: Boolean,

// width of row labels
rowLabelWidth: {type: String, default: "10%"},

// row height
rowHeight: {type: Number, default: 40},

// local
locale: {type: String, default: "en"},

// theme name
theme: String,

// show or hide time grid
grid: Boolean,

// an array of highlighted hours
highlightedHours: {type: Array, default: () => []},

// the total width of the entire ganttastic component in %
width: {type: String, default: "100%"},

// pusn on overlap
pushOnOverlap: {type: Boolean},

// snap background on overlap
snapBackOnOverlap: {type: Boolean},

//  minimum gap between bars
minGapBetweenBars: {
  type: Number,
  default: 0
}

Preview:

Changelog:

v2.2.0 (08/15/2023)

• Native JavaScript Date objects may

v2.1.4 (01/25/2023)

• Native JavaScript Date objects may now be used for the props chart-start and chart-end, as well as for the bar-start and bar-end properties of used bar objects. if this is your use case, simply pass false to the dateFormat prop of the g-gantt-chart component

v2.1.3 (11/26/2022)

• improved performance when dragging bar by removing redundant getBoundingClientRect calls and by using utility functions from vue-use
• Bug fix: when a bar with no bundle-ID is pushed while push-on-overlap is active, other bars with a falsy bundle-ID won’t be moved anymore

v2.1.2 (10/22/2022)

• update

v2.1.1 (09/21/2022)

• exposed types for library users
• provided context with new composable ‘useContext’
• fixed minor type issues
• updated styles:
• using correct typographic character for range values
• using numeric font variant so that dates always take up the same width
• aligned wording getRowsInChart and getChartRows

v2.0.5 (07/24/2022)

• Added “click-bar” event

v2.0.4 (05/08/2022)

• Bugfix

v2.0.2 (02/05/2022)

• Bugfix

v2.0.1 (01/08/2022)

• Fix: bars re-position themselves when chartStart/chartEnd changes

v2.0.0 (01/05/2022)

• Added vue 3 support.

v0.9.32 (01/13/2021)

• Highlighting on hover works while dragging a HTML element over a gantt row

v0.9.30 (01/11/2021)

• Added prop for specifying minimum gap between bars in minutes

v0.9.23 (07/02/2020)

• Fix: bars with pushOnOverlap: false not considered when computing drag limits

v0.9.15 (06/16/2020)

• Fixed bug when immobile bar is 0 pixels away from bar about to be dragged
• Immobile bars also emit a mousedown event now (but they cannot be dragged)
• Started working on special “shadow” bars
• Updated NPM package version

Download Details:

Author: zunnzunn

Live Demo: https://infectoone.github.io/vue-ganttastic/

Download Link: https://github.com/zunnzunn/vue-ganttastic/archive/refs/heads/master.zip

Official Website: https://github.com/zunnzunn/vue-ganttastic

Install & Download:

# NPM
$ npm install vue-ganttastic --save