Timezone in EJ2 JavaScript Gantt Chart Control

1 Jul 202617 minutes to read

The EJ2 JavaScript Gantt Chart control 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:

var ganttChart = new ej.gantt.Gantt({
  id: 'ganttDefault',
  height: '450px',
  dataSource: data,
  taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
  },
  timelineSettings: {
    timelineUnitSize: 65,
    topTier: { unit: 'Day', format: 'MMM dd, yyyy' },
    bottomTier: { unit: 'Hour', format: 'hh:mm a' }
  },
  dayWorkingTime: [{ from: 0, to: 24 }],
  timezone: 'UTC',
  durationUnit: 'Hour',
  dateFormat: 'hh:mm a',
  includeWeekend: true,
  columns: [
    { field: 'TaskID', headerText: 'Task ID', width: 100 },
    { field: 'TaskName', headerText: 'Task Name', width: 250 },
    { field: 'StartDate', headerText: 'Start Date', width: 150 },
    { field: 'Duration', headerText: 'Duration', width: 150 },
    { field: 'Progress', headerText: 'Progress', width: 150 }
  ]
});

ganttChart.appendTo('#Gantt');
<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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.

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"
};

const gantt = new ej.gantt.Gantt({
  dataSource: data,
  taskFields: taskFields,
  height: "450px",
  durationUnit: "Hour",
  timezone: "America/New_York"
});

gantt.appendTo('#Gantt');

Display tasks without timezone

Without a specified timezone, the Gantt Chart control 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.

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"
};

const gantt = new ej.gantt.Gantt({
  dataSource: data,
  taskFields: taskFields,
  height: "450px",
  durationUnit: "Hour"
});

gantt.appendTo('#Gantt');

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:

var ganttChart = new ej.gantt.Gantt({
    height: '450px',
    dataSource: data,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    timelineSettings: {
        timelineUnitSize: 65,
        topTier: { unit: 'Day', format: 'MMM dd, yyyy' },
        bottomTier: { unit: 'Hour', format: 'hh:mm a' }
    },
    dayWorkingTime: [{ from: 0, to: 24 }],
    timezone: 'America/New_York',
    durationUnit: 'Hour',
    dateFormat: 'hh:mm a',
    includeWeekend: true,
    actionComplete: function (args) {
        if (args.action === 'TaskbarEditing') {
            console.log(args.data.ganttProperties.startDate);
        }
    }
});

ganttChart.appendTo('#Gantt');
<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </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 = new ej.base.Timezone();
    let date = new Date(2018, 11, 5, 15, 25, 11);
    let timeZoneOffset = 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 = new ej.base.Timezone();
    let date = new Date(2018, 11, 5, 15, 25, 11);
    let convertedDate = timezone.convert(date, "Europe/Paris", "Asia/Tokyo");
    let convertedDate1 = 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 = new ej.base.Timezone();
    let date = new Date(2018, 11, 5, 15, 25, 11);
    let convertedDate = timezone.remove(date, "Europe/Paris");
    console.log(convertedDate); //2018-12-05T14:25:11.000Z

See also