Install & Download:
Description:
dj-gantt is a simple Gantt Chart component that features draggable, resizable, and zoomable.
How to use it:
1. Import necessary resources.
import Vue from 'vue'; import VueDjGantt from '@/VueDjGantt.vue'; import moment from "moment";
2. Register the component.
export default Vue.extend({
components: {
VueDjGantt
},
}3. Add the VueDjGantt component to the app template.
<VueDjGantt :from="from" :to="to" :list="list" :rows="rows" :items="items" />
4. Prepare your own data for the Gantt Chart.
export default Vue.extend({
components: {
VueDjGantt
},
data() {
return {
list: [
{
id: "internalId",
width: 80,
header: {
content: "# ID"
}
},
{
id: "name",
width: 200,
header: {
content: "Resurce name"
}
},
],
from: (+ +new Date()) - (2 * 24 * 60 * 60 * 1000),
to: moment().startOf('day').add(1, 'months'),
rows: [
{
id: 1,
internalId: '#1',
name: 'First',
},
{
id: 2,
internalId: '#2',
name: 'Second',
},
],
items: [
{
rowId: 1,
label: `Some task`,
style: {background: '#24abf2'},
time: {
start: (+ +new Date()) - (1.2 * 24 * 60 * 60 * 1000),
end: (+ +new Date()) + (1 * 24 * 60 * 60 * 1000),
},
},
{
rowId: 2,
label: `Other task`,
style: {background: '#abf224'},
time: {
start: moment().add(12, 'hours'),
end: moment().add(2, 'days').add(4, 'hours'),
},
},
],
}
},
});5. Default component props.
from: {},
to: {},
locale: {
type: String,
default: 'en',
},
height: {
type: Number,
default: null,
},
list: {
type: Array,
default: () => [],
},
rows: {
type: Array,
default: () => [],
},
items: {
type: Array,
default: () => [],
},
cells: { type: Object },
snapStartFunction: { type: Function },
snapEndFunction: { type: Function },
canSelectFunction: { type: Function },
moveable: {
type: Boolean,
default: false,
},
resizable: {
type: Boolean,
default: false,
},
selectable: {
type: Boolean,
default: false,
},Preview:
