Timezone in TypeScript Gantt Chart Control

18 Nov 20183 minutes to read

The TypeScript 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:

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.

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.

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:

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

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

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”)