Frappe Gantt
A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales
Try it! Drag tasks across the timeline, resize to change duration, click to view more information
Installation
npm install frappe-gantt
Usage
Dependencies: momentjs and snapsvg
Include it in your html
<script src="frappe-gantt.min.js" />
Create an svg element
<svg id="gantt"></svg>
Initiliaze a new Gantt object
var tasks = [
{
id: 'Task 1',
name: 'Redesign website',
start: '2016-12-28',
end: '2016-12-31',
progress: 20,
dependencies: 'Task 2, Task 3'
},
...
]
var gantt = new Gantt("#gantt", tasks);
Change view mode
gantt.change_view_mode('Week') // Quarter Day, Half Day, Day, Week, Month
Add event listeners
var gantt = new Gantt('#gantt', tasks, {
on_click: function (task) {
console.log(task);
},
on_date_change: function(task, start, end) {
console.log(task, start, end);
},
on_progress_change: function(task, progress) {
console.log(task, progress);
},
on_view_change: function(mode) {
console.log(mode);
}
});
Custom HTML in popup
var gantt = new Gantt('#gantt', tasks, {
// can be a function that returns html
// or a simple html string
custom_popup_html: function(task) {
// the task object will contain the updated
// dates and progress value
const end_date = task._end.format('MMM D');
return `
<div class="details-container">
<h5>${task.name}</h5>
<p>Expected to finish by ${end_date}</p>
<p>${task.progress}% completed!</p>
</div>
`;
}
});