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