$(function() {
$("#gantt").dxGantt({
stripLines: [{
title: "Start",
start: tasks[0].start
}, {
title: "Final Phase",
start: tasks[tasks.length - 3].start,
end: tasks[tasks.length - 1].end,
}, {
title: "Current Time",
start: currentDate,
cssClass: "current-time"
}],
tasks: {
dataSource: tasks
},
editing: {
enabled: false
},
validation: {
autoUpdateParentTasks: true
},
columns: [{
dataField: "title",
caption: "Task",
width: 300
}],
taskListWidth: 300,
taskTitlePosition: "none"
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx-gantt.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx-gantt.min.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="gantt">
</div>
</div>
</body>
</html>
#gantt {
height: 700px;
}
#gantt .current-time {
border-left: 1px solid red;
}
var currentDate = new Date(Date.now()),
month = currentDate.getMonth(),
year = currentDate.getFullYear();
var tasks = [{
'id': 1,
'parentId': 0,
'title': 'Johnson Residence Construction Project',
'start': new Date(year, month - 1, 1),
'end': new Date(year, month - 1, 1),
'progress': 0
}, {
'id': 2,
'parentId': 1,
'title': 'Planning and Pre-Construction Phase',
'start': new Date(year, month - 1, 1),
'end': new Date(year, month - 1, 1),
'progress': 0
}, {
'id': 3,
'parentId': 2,
'title': 'Architectural Design and Site Planning',
'start': new Date(year, month - 1, 1),
'end': new Date(year, month - 1, 15),
'progress': 0
}, {
'id': 4,
'parentId': 2,
'title': 'Engineering and Final Blueprint',
'start': new Date(year, month - 1, 8),
'end': new Date(year, month - 1, 15),
'progress': 0
}, {
'id': 5,
'parentId': 2,
'title': 'City Permits and Contracts',
'start': new Date(year, month - 1, 15),
'end': new Date(year, month - 1, 18),
'progress': 0
}, {
'id': 6,
'parentId': 1,
'title': 'Construction Phase',
'start': new Date(year, month - 1, 18),
'end': new Date(year, month - 1, 18),
'progress': 0
}, {
'id': 7,
'parentId': 6,
'title': 'Grading and Excavation',
'start': new Date(year, month - 1, 18),
'end': new Date(year, month - 1, 22),
'progress': 0
}, {
'id': 8,
'parentId': 6,
'title': 'Demolition and Removal',
'start': new Date(year, month - 1, 19),
'end': new Date(year, month - 1, 23),
'progress': 0
}, {
'id': 9,
'parentId': 6,
'title': 'Foundation and Concrete ',
'start': new Date(year, month - 1, 22),
'end': new Date(year, month - 1, 29),
'progress': 0
}, {
'id': 10,
'parentId': 6,
'title': 'Rough Framing and Carpentery',
'start': new Date(year, month - 1, 25),
'end': new Date(year, month, 5),
'progress': 0
}, {
'id': 11,
'parentId': 6,
'title': 'Inspection (Structure)',
'start': new Date(year, month, 5),
'end': new Date(year, month, 5),
'progress': 0
}, {
'id': 12,
'parentId': 6,
'title': 'Electrical Rough-in',
'start': new Date(year, month, 6),
'end': new Date(year, month, 19),
'progress': 0
}, {
'id': 13,
'parentId': 6,
'title': 'Plumbing Rough-in',
'start': new Date(year, month, 19),
'end': new Date(year, month, 19),
'progress': 0
}, {
'id': 14,
'parentId': 6,
'title': 'Heating and A/C',
'start': new Date(year, month, 19),
'end': new Date(year, month, 26),
'progress': 0
}, {
'id': 15,
'parentId': 6,
'title': 'Drywall',
'start': new Date(year, month, 25),
'end': new Date(year, month + 1, 10),
'progress': 0
}, {
'id': 16,
'parentId': 6,
'title': 'Painting (Exterior)',
'start': new Date(year, month + 1, 7),
'end': new Date(year, month + 1, 21),
'progress': 0
}, {
'id': 17,
'parentId': 6,
'title': 'Interior Carpentery (Interior)',
'start': new Date(year, month + 1, 17),
'end': new Date(year, month + 1, 29),
'progress': 0
}, {
'id': 18,
'parentId': 6,
'title': 'Flooring and Interior Paint',
'start': new Date(year, month + 1, 26),
'end': new Date(year, month + 2, 9),
'progress': 0
}, {
'id': 19,
'parentId': 1,
'title': 'Final Phase',
'start': new Date(year, month + 2, 9),
'end': new Date(year, month + 2, 9),
'progress': 0
}, {
'id': 20,
'parentId': 19,
'title': 'Review-Punch List',
'start': new Date(year, month + 2, 9),
'end': new Date(year, month + 2, 23),
'progress': 0
}, {
'id': 21,
'parentId': 19,
'title': 'Final Inspection',
'start': new Date(year, month + 2, 24),
'end': new Date(year, month + 2, 24),
'progress': 0
}, {
'id': 22,
'parentId': 19,
'title': 'Final Paperwork and Documents',
'start': new Date(year, month + 2, 24),
'end': new Date(year, month + 2, 30),
'progress': 0
}];