Change schedule dates in React Gantt component

2 Feb 20237 minutes to read

In the Gantt component, you can change the schedule start and end dates by clicking the custom button programmatically using the updateProjectDates method. You can pass the start and end dates as method arguments to the updateProjectDates method. You can also pass the Boolean value as an additional parameter, which is used to round-off the schedule start and end dates displayed in Gantt timeline.

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { taskData } from './datasource';

const App = () => {
    const ganttRef = useRef(null);

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentId'
    };

    const clickHandler = () => {
        if (ganttRef.current) {
            ganttRef.current.updateProjectDates(
                new Date('01/10/2019'),
                new Date('06/20/2019'),
                true
            );
        }
    };

    return (
        <div>
            <ButtonComponent onClick={clickHandler}>
                Update Schedule Dates
            </ButtonComponent>
            <GanttComponent
                dataSource={taskData}
                taskFields={taskFields}
                height="450px"
                ref={ganttRef}
            />
        </div>
    );
};

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

function App() {
  let ganttInstance: GanttComponent | null = null;  // Type as GanttComponent or null initially
  
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentId'
  };

  // Button click handler to update the project dates
  function clickHandler() {
    if (ganttInstance) {
      ganttInstance.updateProjectDates(new Date('01/10/2019'), new Date('06/20/2019'), true);
    }
  }

  return (
    <div>
      <ButtonComponent onClick={clickHandler}>Update ScheduleDates</ButtonComponent>
      <GanttComponent
        dataSource={taskData}
        taskFields={taskFields}
        height='450px'
        ref={(gantt) => (ganttInstance = gantt)}  // Set ganttInstance to the GanttComponent instance
      />
    </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/29.2.4/material.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>