Change schedule date in EJ2 TypeScript Gantt control

4 May 20233 minutes to read

In the Gantt control, 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 { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { data } from 'datasource.ts';

Gantt.Inject(Edit, Selection);

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    }
});

gantt.appendTo('#Gantt');

let dateBtn: Button = new Button();
dateBtn.appendTo('#updateSchedule');

document.getElementById('updateSchedule').addEventListener('click', () => {
    gantt.updateProjectDates(new Date('01/10/2019'), new Date('06/20/2019'), true);
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
	<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
	  <button id="updateSchedule">Change Schedule Dates</button>  
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>