npm install frappe-gantt
Include it in your HTML:
<script src="frappe-gantt.min.js"></script>
<link rel="stylesheet" href="frappe-gantt.css">
And start hacking:
var tasks = [
{
id: 'Task 1',
name: 'Redesign website',
start: '2016-12-28',
end: '2016-12-31',
progress: 20,
dependencies: 'Task 2, Task 3',
custom_class: 'bar-milestone' // optional
},
...
];
var gantt = new Gantt("#gantt", tasks);
You can also pass various options to the Gantt constructor:
var gantt = new Gantt("#gantt", tasks, {
header_height: 50,
column_width: 30,
step: 24,
view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
bar_height: 20,
bar_corner_radius: 3,
arrow_curve: 5,
padding: 18,
view_mode: 'Day',
date_format: 'YYYY-MM-DD',
custom_popup_html: null
});
Although uncommon in GANTT charts you can specify an additional array for the periods
key of a task to show additional bars in the task row of the generated chart
The following example shows the task from above with three additional periods:
var tasks = [
{
id: 'Task 1',
name: 'Redesign website',
start: '2016-12-28',
end: '2016-12-31',
progress: 20,
dependencies: 'Task 2, Task 3',
custom_class: 'bar-milestone', // optional
periods: [
{
start: '2017-01-05',
end: '2017-01-07'
},
{
start: '2017-01-09',
end: '2017-01-14'
},
{
start: '2017-01-15',
end: '2017-01-17'
}
]
},
...
];
var gantt = new Gantt("#gantt", tasks);
Supported formats for start
and end
keys of each object in periods
are the same as for start
and end
on
the main task definition. Please be advised, that it is not supported to enable mouse events for tasks that have periods.
You should disable user interaction for the task bar manipulation if you use the period
feature.
Due to the structure of the library even if you use periods you have to specify a start
and end
attribute for the
task. If e.g. you want bars inside the row of a task the first period is specified in start
and end
and the second
one in the periods
attribute:
var tasks = [
{
id: 'task1',
name: 'two time period task',
start: '2016-12-28',
end: '2016-12-31',
periods: [
{
start: '2017-01-05',
end: '2017-01-07'
}
]
}
];
var gantt = new Gantt("#gantt", tasks);
If a period is clicked, the period definition is passed to the on_click
handler as second parameter after the task.
If you want to display a diamond shaped item for a task to indicate a checkpoint you can specify a period with the
key type
set to checkpoint. This will render a diamond shape at the specified start
date.
var tasks = [
{
id: 'task1',
name: 'My checkpoint task',
start: '2016-12-28',
end: '2016-12-31',
periods: [
{
type: 'checkpoint',
start: '2017-01-05'
}
]
}
];
If you want to specify custom classes for tasks and/or periods you may do so with the custom_class
or fill
property.
Task classes specifed via custom_class
on task level are inherited to its periods. This is also true for the fill
property. However, if a period defines a fill
property it overrides the one specified on task level, whereas a
custom_class
on period level is simply added alongside a custom_class
on task level.
var tasks = [
{
id: 'task1',
name: 'My checkpoint task',
start: '2016-12-28',
end: '2016-12-31',
custom_class: 'my-task-css-class',
periods: [
{
start: '2017-01-05',
end: '2017-01-07'
},
{
start: '2017-01-08',
end: '2017-01-09',
custom_class: 'my-period-css-class',
fill: '#ff0000'
}
]
}
];
var gantt = new Gantt("#gantt", tasks);
If you want to contribute:
cd
into project directoryyarn
yarn run dev
License: MIT
Project maintained by frappe