frappe gantt

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min.css">
<div class="card" style="overflow: scroll" style="overflow: scroll">
			<svg id="gantt"></svg>
</div>

CSS

.gantt .handle {
  display: none;
}

.details-container {
  background: #fff;
  display: inline-block;
  padding: 12px;	
	width: 200px;
}

.details-container h5, .details-container p {
  margin: 0;
}

.details-container h5 {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #555;
}

.details-container p {
  font-size: 12px;
  margin-bottom: 6px;
  color: #666;
}

.details-container p:last-child {
  margin-bottom: 0;
}

.gantt .hide {
  display: none;
}

JavaScript

var names = [
        ["Redesign website", [0, 7]],
        ["Write new content", [1, 4]],
        ["Apply new styles", [3, 6]],
        ["Review", [7, 7]],
        ["Deploy", [8, 9]],
        ["Go Live!", [10, 10]]
    ];

    var tasks = names.map(function(name, i) {
        var today = new Date();
        var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
        var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
        start.setDate(today.getDate() + name[1][0]);
        end.setDate(today.getDate() + name[1][1]);
        return {
            start: start,
            end: end,
            name: name[0],
            id: "Task " + i,
            progress: parseInt(Math.random() * 100, 10)
        }
    });
    tasks[1].dependencies = "Task 0"
    tasks[2].dependencies = "Task 1"
    tasks[3].dependencies = "Task 2"
    tasks[5].dependencies = "Task 4"

var gantt4 = new Gantt("#gantt", tasks, {
				language: "ru",
        custom_popup_html: function(task) {
					const end_date = moment(task.end).format('YYYY.MM.DD');
          return `
            <div id="details" class="details-container">
              <h5>${task.name}</h5>
              <p>Expected to finish by ${end_date}</p>
              <p>${task.progress}% completed!</p>
            </div>
          `;
        }
    });