Strip Lines

$(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: "Subject", width: 300 }], taskListWidth: 300 }); });

<!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.1.6/js/dx-gantt.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" /> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx-gantt.min.css" /> <script src="https://cdn3.devexpress.com/jslib/20.1.6/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 }];

jQuery

Vue

React