A Vue.js plugin that adds a gantt component to your project
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
Below is a simple example of a gantt event
events:title: 'Test' // Title of the eventoffset: 1 // Offset from the first day in the gantt chartduration: 4 // Duration in daysstatus: 'active' // used for colouring
Add a readOnly flag to the event to display the event but to disable any editing in gantt component
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: 1duration: 4status: 'active'frequency:key: 'weekly'
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: 1duration: 4status: 'in_progress'title: 'Test'offset: 5duration: 3status: 'active'
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: 1duration: 4status: 'in_progress'title: 'Another'offset: 5duration: 3status: 'active'dependencies: 0
You can also pass in custom start and end dates into the gantt chart by using the start-period and end-period props.
Emitted on right-click and edit
Emitted when an event is edited on the gantt chart