const dp = new DayPilot.Gantt("dp", {
taskGroupMode: "Auto",
days: 30,
startDate: new DayPilot.Date().getDatePart().addDays(-2),
columns: [
{
title: "Name",
width: 50,
property: "text"
},
{
title: "Info",
width: 50,
property: "info"
},
{
title: "Duration",
width: 50
}
],
onBeforeRowHeaderRender: function (args) {
const duration = args.task.duration();
const html = duration.toString("d") + "d " + duration.toString("h") + "h";
args.row.columns[2].html = html;
},
taskVersionsEnabled: true,
taskVersionPosition: "Above"
});
const app = {
loadData() {
let start = new DayPilot.Date().getDatePart();
let last = null;
for (let i = 1; i <= 5; i++) {
const duration = Math.floor(Math.random() * 3) + 5; // 5 to 7
const end = start.addDays(duration);
const e = new DayPilot.Task({
start: start,
end: end,
id: DayPilot.guid(),
text: "Task " + i,
tags: {
info: "info text"
},
children: [
{
start: start,
end: end.addDays(2),
id: DayPilot.guid(),
text: "Subtask 1",
versions: [
{
start: start.addDays(1),
end: end.addDays(1),
text: "Version 1",
complete: 40,
htmlRight: "right1",
toolTip: "tooltip1"
},
{
start: start.addDays(-1),
end: end.addDays(-1),
text: "Version 2",
complete: 50,
htmlLeft: "left2",
htmlRight: "right2",
toolTip: "tooltip2",
barHidden: true,
cssClass: "test2"
}
],
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"
}
]
});
dp.tasks.add(e);
if (last) {
dp.links.add(
new DayPilot.Link({
id: DayPilot.guid(), // optional
from: last,
to: e.id(),
type: "FinishToStart"
})
);
}
last = e.id();
start = end;
}
},
addEventHandlers() {
document.querySelector("#position").addEventListener("change", function () {
dp.taskVersionPosition = this.value;
dp.update();
});
},
init() {
this.loadData();
dp.init();
this.addEventHandlers();
}
};
app.init();