croud-vue-gantt
A Vue.js plugin that adds a gantt component to your project
Installation
You can add this plugin to your project using yarn
yarn add croud-vue-gantt
You can then install the plugin in your Vue application
Vue
Usage
Gantt events
Below is a simple example of a gantt event
events: title: 'Test' // Title of the event offset: 1 // Offset from the first day in the gantt chart duration: 4 // Duration in days status: 'active' // used for colouring
Read only
Add a readOnly flag to the event to display the event but to disable any editing in gantt component
Repeating events
To show repeating events, add the show-repeats prop to your markup
And add a frequency key to your event object.
events: title: 'Test' offset: 1 duration: 4 status: 'active' frequency: key: 'weekly'
Possible frequencies
- daily
- weekly
- fortnightly
- four_weekly
- monthly
- Quarterly
Grouping events
To show repeating events, add the grouping prop to your markup
Now any events with the same title will be displayed on the same line of the gantt chart.
events: title: 'Test' offset: 1 duration: 4 status: 'in_progress' title: 'Test' offset: 5 duration: 3 status: 'active'
Dependencies
You can add a dependency array to your event object.
You can add a dependency by adding it's index in the event array. The chart will automatically draw a line between these two events.
events: title: 'Test' offset: 1 duration: 4 status: 'in_progress' title: 'Another' offset: 5 duration: 3 status: 'active' dependencies: 0
Date ranges
You can also pass in custom start and end dates into the gantt chart by using the start-period and end-period props.
{ return startPeriod: endPeriod: }
Emitted events
selected(event)
Emitted on right-click and edit
update-event(event)
Emitted when an event is edited on the gantt chart