const gantt = new DayPilot.Gantt("gantt", {
startDate: DayPilot.Date.today().addDays(-1),
days: 60,
columns: [
{
title: "Name",
width: 50,
property: "text"
},
{
title: "Info",
width: 50,
property: "info"
},
],
rowClickHandling: "Edit",
onRowEdit: args => {
console.log("Row edited", args.task, args.x, args.newText);
},
});
gantt.init();
const app = {
loadTasks() {
const tasks = [];
const links = [];
// generate and load sample tasks
let start = DayPilot.Date.today();
let last = null;
for (let i = 0; i < 5; i++) {
const duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
const end = start.addDays(duration);
const e = {
start: start,
end: end,
id: DayPilot.guid(),
text: "Task " + i,
tags: {
info: "info text"
},
children: [
{
start: start,
end: end,
id: DayPilot.guid(),
text: "Subtask 1",
complete: Math.floor(Math.random() * 101) // 0 to 100
},
{
start: start,
end: end,
id: DayPilot.guid(),
text: "Subtask 2",
complete: Math.floor(Math.random() * 101) // 0 to 100
},
{
start: end,
id: DayPilot.guid(),
text: "Milestone 1",
type: "Milestone"
}
]
};
tasks.push(e);
if (last) {
links.push({
id: DayPilot.guid(), // optional
from: last,
to: e.id,
type: "FinishToStart"
});
}
last = e.id;
start = end;
}
gantt.update({
tasks,
links
});
},
init() {
app.loadTasks();
}
};
app.init();