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>
      `;
    }
});
    
Download

View on GitHub

License: MIT