HelpBot Assistant

How can I help you?

Timezone in React Gantt Chart component

19 Feb 202624 minutes to read

The React Gantt Chart component uses the system timezone by default for task scheduling and taskbar rendering, based on JavaScript’s new Date() (e.g., Wed Dec 12 2018 05:23:27 GMT+0530 for IST). To support global teams or specific regions, the timezone property allows setting IANA timezones (e.g., “UTC”, “Asia”) to ensure consistent date display across users. This property function properly when the timeline displays hours. To enable this, set timelineViewMode to ‘Hour’ or configure topTier.unit as ‘Day’ and bottomTier.unit as ‘Hour’.

The Timezone class from @syncfusion/ej2-base provides methods (offset, convert, remove) to manipulate task dates, integrating with taskFields.startDate and taskFields.endDate. CRUD operations adjust dates via events like actionBegin and actionComplete.

Configure consistent time display

Set the timezone property to a valid IANA timezone (e.g., “UTC”) to display consistent task dates across all users, aligning taskbars with database times.

The following example sets UTC timezone:

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

function App() {
  let ganttInstance = null;

  const taskSettings = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    dependency: "Predecessor",
    parentID: "ParentID"
  };

  const timelineSettings = {
    timelineUnitSize: 65,
    topTier: { unit: "Day", format: "MMM dd, yyyy" },
    bottomTier: { unit: "Hour", format: "hh:mm a" }
  };

  const dayWorkingTime = [{ from: 0, to: 24 }];

  return (
    <GanttComponent
      id="ganttDefault"
      height="450px"
      dataSource={data}
      taskFields={taskSettings}
      timelineSettings={timelineSettings}
      dayWorkingTime={dayWorkingTime}
      timezone="UTC"
      durationUnit="Hour"
      dateFormat="hh:mm a"
      includeWeekend={true}
      ref={(g) => (ganttInstance = g)}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
        <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
        <ColumnDirective field="Duration" headerText="Duration" width="150" />
        <ColumnDirective field="Progress" headerText="Progress" width="150" />
      </ColumnsDirective>

      <Inject services={[Selection]} />
    </GanttComponent>
  );
}

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

function App() {
  let ganttInstance: GanttComponent = null;

  const taskSettings: TaskFieldsModel = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    dependency: "Predecessor",
    parentID: "ParentID"
  };

  const timelineSettings: TimelineSettingsModel = {
    timelineUnitSize: 65,
    topTier: { unit: "Day", format: "MMM dd, yyyy" },
    bottomTier: { unit: "Hour", format: "hh:mm a" }
  };
  
  const dayWorkingTime: object = [{ from: 0, to: 24 }];

  return (
    <GanttComponent
      id="ganttDefault"
      height="450px"
      dataSource={data}
      taskFields={taskSettings}
      timelineSettings={timelineSettings}
      dayWorkingTime={dayWorkingTime}
      timezone="UTC"
      durationUnit="Hour"
      dateFormat="hh:mm a"
      includeWeekend={true}
      ref={(g) => (ganttInstance = g)}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" width="100" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
        <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
        <ColumnDirective field="Duration" headerText="Duration" width="150" />
        <ColumnDirective field="Progress" headerText="Progress" width="150" />
      </ColumnsDirective>

      <Inject services={[Selection]} />
    </GanttComponent>
  );
}

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/32.2.3/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>
<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>

This code ensures taskbars reflect UTC dates, unaffected by local timezones.

Set specific timezone

Set a specific timezone using the timezone property, such as America/New_York (UTC -05:00), to display tasks consistently based on that timezone regardless of the local system’s setting. This ensures a task from 9:00 AM to 10:00 AM in New York time, renders the same for all viewers, avoiding time differences in multi-region projects.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  GanttComponent,
  Inject,
  Selection,
  Sort,
  ColumnsDirective,
  ColumnDirective
} from "@syncfusion/ej2-react-gantt";

function App() {

  const data = [
    { TaskID: 1, TaskName: "Project Initiation", StartDate: new Date("2025/08/26 09:00"), EndDate: new Date("2025/08/26 10:00") },
    { TaskID: 2, TaskName: "Define Scope", StartDate: new Date("2025/08/26 10:00"), EndDate: new Date("2025/08/26 12:00"), Duration: 2, parentID: 1 },
    { TaskID: 3, TaskName: "Plan Timeline", StartDate: new Date("2025/08/26 13:00"), EndDate: new Date("2025/08/26 14:00"), Duration: 2, parentID: 1 },
    { TaskID: 4, TaskName: "Resource Allocation", StartDate: new Date("2025/08/26 14:00"), EndDate: new Date("2025/08/26 15:00") },
    { TaskID: 5, TaskName: "Develop Prototype", StartDate: new Date("2025/08/26 15:00"), EndDate: new Date("2025/08/26 16:00"), Duration: 2, parentID: 4 },
    { TaskID: 6, TaskName: "Test Prototype", StartDate: new Date("2025/08/26 16:00"), EndDate: new Date("2025/08/26 17:00"), Duration: 2, parentID: 4 }
    ];

  const taskFields = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    endDate: "EndDate",
    duration: "Duration",
    parentID: "parentID"
  };

  return (
    <GanttComponent
      height="450px"
      dataSource={data}
      taskFields={taskFields}
      durationUnit="Hour"
      timezone="America/New_York"
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Display tasks without timezone

Without a specified timezone, the Gantt Chart component renders tasks according to the local system’s timezone, the default behavior. The new Date() constructor interprets task dates relative to the system’s timezone settings, causing variations in displayed times across different regions. For instance, a task scheduled from 9:00 AM to 10:00 AM UTC, appears as 5:00 AM to 6:00 AM EDT on a system in New York (UTC -04:00, accounting for daylight saving time). This suits localized projects where tasks are managed within a single timezone but may cause scheduling conflicts in distributed teams, as a task’s displayed time shifts depending on the system’s location.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent } from "@syncfusion/ej2-react-gantt";

function App() {

  const data = [
    { TaskID: 1, TaskName: "Project Initiation", StartDate: new Date("2025/08/26 09:00"), EndDate: new Date("2025/08/26 10:00") },
    { TaskID: 2, TaskName: "Define Scope", StartDate: new Date("2025/08/26 10:00"), EndDate: new Date("2025/08/26 12:00"), Duration: 2, parentID: 1 },
    { TaskID: 3, TaskName: "Plan Timeline", StartDate: new Date("2025/08/26 13:00"), EndDate: new Date("2025/08/26 14:00"), Duration: 2, parentID: 1 },
    { TaskID: 4, TaskName: "Resource Allocation", StartDate: new Date("2025/08/26 14:00"), EndDate: new Date("2025/08/26 15:00") },
    { TaskID: 5, TaskName: "Develop Prototype", StartDate: new Date("2025/08/26 15:00"), EndDate: new Date("2025/08/26 16:00"), Duration: 2, parentID: 4 },
    { TaskID: 6, TaskName: "Test Prototype", StartDate: new Date("2025/08/26 16:00"), EndDate: new Date("2025/08/26 17:00"), Duration: 2, parentID: 4 }
  ];

  const taskFields = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    endDate: "EndDate",
    duration: "Duration",
    parentID: "parentID"
  };

  return (
    <GanttComponent
      dataSource={data}
      height="450px"
      taskFields={taskFields}
      durationUnit="Hour"
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Handle CRUD operations with timezone

CRUD operations respect the timezone set at load time, with edits processed in the user’s timezone and converted to the database timezone (e.g., UTC) in client-side events like actionBegin and actionComplete.

The following example handles CRUD with timezone:

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

function App() {

  let ganttInstance = null;

  const taskSettings = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    dependency: "Predecessor",
    parentID: "ParentID"
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const timelineSettings = {
    timelineUnitSize: 65,
    topTier: { unit: "Day", format: "MMM dd, yyyy" },
    bottomTier: { unit: "Hour", format: "hh:mm a" }
  };

  const dayWorkingTime = [{ from: 0, to: 24 }];

  function actionComplete(args) {
    if (args.action === "TaskbarEditing") {
      console.log(args.data.ganttProperties.startDate);
    }
  }

  return (
    <GanttComponent
      height="450px"
      dataSource={data}
      taskFields={taskSettings}
      editSettings={editSettings}
      dayWorkingTime={dayWorkingTime}
      timelineSettings={timelineSettings}
      timezone="America/New_York"
      durationUnit="Hour"
      dateFormat="hh:mm a"
      includeWeekend={true}
      actionComplete={actionComplete}
      ref={(g) => (ganttInstance = g)}
    >
      <Inject services={[Edit, Selection]} />
    </GanttComponent>
  );
}

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

function App() {

  let ganttInstance = null;

  const taskSettings: TaskFieldsModel = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "Progress",
    dependency: "Predecessor",
    parentID: "ParentID"
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const timelineSettings: TimelineSettingsModel = {
    timelineUnitSize: 65,
    topTier: { unit: "Day", format: "MMM dd, yyyy" },
    bottomTier: { unit: "Hour", format: "hh:mm a" }
  };

  const dayWorkingTime: object = [{ from: 0, to: 24 }];

  function actionComplete(args: ActionCompleteArgs) {
    if (args.action === "TaskbarEditing") {
      console.log(args.data.ganttProperties.startDate);
    }
  }

  return (
    <GanttComponent
      height="450px"
      dataSource={data}
      taskFields={taskSettings}
      editSettings={editSettings}
      dayWorkingTime={dayWorkingTime}
      timelineSettings={timelineSettings}
      timezone="America/New_York"
      durationUnit="Hour"
      dateFormat="hh:mm a"
      includeWeekend={true}
      actionComplete={actionComplete}
      ref={(g) => (ganttInstance = g)}
    >
      <Inject services={[Edit, Selection]} />
    </GanttComponent>
  );
}

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/32.2.3/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>
<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>

Use timezone methods

The Timezone class from @syncfusion/ej2-base provides methods to manipulate task dates for display or storage in Gantt.

offset

Calculates the difference (in minutes) between a UTC date and a specified timezone.

Parameter Type Description
Date Date UTC date object
Timezone string IANA timezone (e.g., “Europe/Paris”)

Returns: number

    // Assume your local timezone as IST/UTC+05:30.
    let timezone: Timezone = new Timezone();
    let date: Date = new Date(2018,11,5,15,25,11);
    let timeZoneOffset: number = timezone.offset(date,"Europe/Paris");
    console.log(timeZoneOffset); //-60

convert

Converts a date from one timezone to another.

Parameter Type Description
Date Date UTC date object
fromOffset number/string Source timezone or offset (e.g., “Europe/Paris” or 60)
toOffset number/string Target timezone or offset (e.g., “Asia/Tokyo” or -540)

Returns: Date

    // Assume your local timezone as IST/UTC+05:30.
    let timezone: Timezone = new Timezone();
    let date: Date = new Date(2018,11,5,15,25,11);
    let convertedDate: Date = timezone.convert(date, "Europe/Paris", "Asia/Tokyo");
    let convertedDate1: Date = timezone.convert(date, 60, -360);
    console.log(convertedDate); //2018-12-05T08:55:11.000Z.
    console.log(convertedDate1); //2018-12-05T16:55:11.000Z.

remove

Removes the timezone offset, returning a UTC-equivalent date.

Parameter Type Description
date Date UTC date object
timezone string IANA timezone (e.g., “Europe/Paris”)

Returns: Date

    // Assume your local timezone as IST/UTC+05:30.
    let timezone: Timezone = new Timezone();
    let date: Date = new Date(2018,11,5,15,25,11);
    let convertedDate: Date = timezone.remove(date, "Europe/Paris");
    console.log(convertedDate); //2018-12-05T14:25:11.000Z.

See also