DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Gantt - Strip Lines

This demo illustrates how to use strip lines to highlight different times in the DevExtreme Gantt component. The Gantt stores strip lines in its stripLines collection. You can specify a title (title) and appearance settings (CssClass) for each strip line.

Use the start property to specify an individual strip line or combine it with the end property to specify a time interval.

Backend API
import React from 'react'; import Gantt, { Tasks, Column, Validation, StripLine, } from 'devextreme-react/gantt'; import { tasks, currentDate } from './data.ts'; function App() { return ( <Gantt taskListWidth={300} height={700} taskTitlePosition="none"> <StripLine start={tasks[0].start} title="Start" /> <StripLine start={tasks[tasks.length - 3].start} end={tasks[tasks.length - 1].end} title="Final Phase" /> <StripLine start={currentDate} title="Current Time" cssClass="current-time" /> <Validation autoUpdateParentTasks /> <Tasks dataSource={tasks} /> <Column dataField="title" caption="Task" width={300} /> </Gantt> ); } export default App;
import React from 'react'; import Gantt, { Tasks, Column, Validation, StripLine, } from 'devextreme-react/gantt'; import { tasks, currentDate } from './data.js'; function App() { return ( <Gantt taskListWidth={300} height={700} taskTitlePosition="none" > <StripLine start={tasks[0].start} title="Start" /> <StripLine start={tasks[tasks.length - 3].start} end={tasks[tasks.length - 1].end} title="Final Phase" /> <StripLine start={currentDate} title="Current Time" cssClass="current-time" /> <Validation autoUpdateParentTasks /> <Tasks dataSource={tasks} /> <Column dataField="title" caption="Task" width={300} /> </Gantt> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const currentDate = new Date(Date.now()); const month = currentDate.getMonth(); const year = currentDate.getFullYear(); export const 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, 28), 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, 28), 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, 28), progress: 0, }];
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const currentDate = new Date(Date.now()); const month = currentDate.getMonth(); const year = currentDate.getFullYear(); export const 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, 28), 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, 28), 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, 28), progress: 0, }, ];
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx-gantt.min.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-gantt .dx-gantt-tm.current-time { border-left: 1px solid red; }