DayPilot Edition:
Cells
PROCell Width
Time Axis
PRORange
PROTime Headers
Rows
PROTask Height
PROCollapsible Row Header
PRORow Moving
Tasks
PROTask Creating
PROTask Moving
PROLink Creating
«
»
Gantt Chart UI Builder
- Preview
- Config
- Tasks
- Links
- Download
DEMO
Group 1
Task 1
Task 2
Milestone 1
November 2024
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Group 1
Task 1
60%
Task 2
0%
Milestone 1
Loading...
{
cellWidthSpec: "Fixed",
cellWidth: 40,
timeHeaders: [
{
groupBy: "Month",
},
{
groupBy: "Day",
format: "d",
},
],
scale: "Day",
days: DayPilot.Date.today().daysInMonth(),
startDate: DayPilot.Date.today().firstDayOfMonth(),
taskHeight: 35,
rowHeaderHideIconEnabled: false,
rowMoveHandling: "Update",
onRowMoved: (args) => {
args.control.message("Row moved: " + args.source.text());
},
taskMoveHandling: "Update",
onTaskMoved: (args) => {
args.control.message("Task moved to: " + args.newStart);
},
linkCreateHandling: "Update",
onLinkCreated: (args) => {
args.control.message("Link created, type: " + args.type);
},
rowCreateHandling: "Enabled",
onRowCreate: (args) => {
const gantt = args.control;
gantt.tasks.add({
id: DayPilot.guid(),
text: args.text,
start: gantt.startDate,
end: gantt.startDate.addDays(1)
});
},
}
[
{
"id": 1,
"text": "Group 1",
"complete": 35,
"children": [
{
"id": 2,
"start": "2024-11-04T00:00:00",
"end": "2024-11-11T00:00:00",
"text": "Task 1",
"complete": 60
},
{
"id": 3,
"start": "2024-11-11T00:00:00",
"end": "2024-11-16T00:00:00",
"text": "Task 2",
"complete": 0
},
{
"id": 4,
"start": "2024-11-16T00:00:00",
"type": "Milestone",
"text": "Milestone 1",
"end": "2024-11-16T00:00:00"
}
],
"start": "2024-11-04T00:00:00",
"end": "2024-11-16T00:00:00"
}
]
[
{
"from": 2,
"to": 3,
"type": "FinishToStart"
}
]
Project name:
Project target: