Update Project Schedule Dates in React Gantt Chart Component

18 Nov 20187 minutes to read

The updateProjectDates method in the React Gantt Chart component enables programmatic adjustment of the project’s start and end dates, seamlessly updating the timeline and task positions for efficient schedule management. By passing valid Date objects for the start and end dates, you can shift the entire project timeline, such as moving a project forward by a month to accommodate delays. An optional Boolean roundOff parameter, when set to true, aligns dates to the timeline’s unit (e.g., days or weeks), ensuring a clean and consistent display. Ensure the Gantt has a defined dataSource and timelineSettings to render the updated schedule accurately. Use valid date formats and leverage the roundOff option to optimize timeline rendering for clarity.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, Inject, Selection } from "@syncfusion/ej2-react-gantt";
import { taskData } from "./datasource";

function App() {
    let ganttInstance = null;
    const taskSettings = {
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        duration: "Duration",
        progress: "Progress",
        parentID: "ParentID"
    };
    function change() {
        ganttInstance.updateProjectDates(
            new Date("04/10/2019"),
            new Date("06/20/2019"),
            true
        );
    }
    return (
        <div>
            <button id="changedate" onClick={change}>Change Date</button>
            <br /><br />
            <GanttComponent
                height="430px"
                dataSource={taskData}
                taskFields={taskSettings}
                ref={(g) => (ganttInstance = g)}
            >
                <Inject services={[Selection]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent, Inject, Selection, TaskFieldsModel } from "@syncfusion/ej2-react-gantt";
import { taskData } from "./datasource";

function App() {
  let ganttInstance: GanttComponent | null = null;
  const taskSettings: TaskFieldsModel = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    parentID: "ParentID"
  };
  function change(): void {
    ganttInstance!.updateProjectDates(
      new Date("04/10/2019"),
      new Date("06/20/2019"),
      true
    );
  }
  return (
    <div>
      <button id="changedate" onClick={change}>Change Date</button>
      <br /><br />
      <GanttComponent
        height="430px"
        dataSource={taskData}
        taskFields={taskSettings}
        ref={(g) => (ganttInstance = g)}
      >
        <Inject services={[Selection]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

See also