Timezone in Angular Gantt

18 Oct 202524 minutes to read

The Angular Gantt 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. 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 { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';

@Component({
    imports: [GanttModule],
    providers: [SelectionService],
    standalone: true,
    selector: 'app-root',
    template:
        `<ejs-gantt [dataSource]="data" [taskFields]="taskSettings" [dayWorkingTime]="dayWorkingTime" [timelineSettings]="timelineSettings" timezone="UTC" durationUnit="Hour" dateFormat="hh:mm a" height="450px" [includeWeekend]="true">`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
    public data?: object[];
    public taskSettings?: object;
    public timelineSettings?: object;
    public timezoneValue: string = 'UTC';
    public dayWorkingTime?: object[];

    public ngOnInit(): void {
        this.data = [
            { TaskID: 1, TaskName: 'Project Schedule', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('03/10/2019') },
            { TaskID: 2, TaskName: 'Planning', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('02/10/2019'), ParentID: 1 },
            { TaskID: 3, TaskName: 'Plan timeline', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('02/10/2019'), Duration: 6, Progress: '60', ParentID: 2 },
            { TaskID: 4, TaskName: 'Plan budget', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('02/10/2019'), Duration: 6, Progress: '90', ParentID: 2 },
            { TaskID: 5, TaskName: 'Allocate resources', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('02/10/2019'), Duration: 6, Progress: '75', ParentID: 2 },
            { TaskID: 6, TaskName: 'Planning complete', StartDate: new Date('02/06/2019 08:00'), EndDate: new Date('02/10/2019'), Duration: 0, Predecessor: '3FS,4FS,5FS', ParentID: 2 },
            { TaskID: 7, TaskName: 'Design', StartDate: new Date('02/13/2019 08:00'), EndDate: new Date('02/17/2019 08:00'), ParentID: 1, },
            { TaskID: 8, TaskName: 'Software Specification', StartDate: new Date('02/13/2019 08:00'), EndDate: new Date('02/15/2019'), Duration: 3, Progress: '60', Predecessor: '6FS', ParentID: 7, },
            { TaskID: 9, TaskName: 'Develop prototype', StartDate: new Date('02/13/2019 08:00'), EndDate: new Date('02/15/2019'), Duration: 3, Progress: '100', Predecessor: '6FS', ParentID: 7, },
            { TaskID: 10, TaskName: 'Get approval from customer', StartDate: new Date('02/16/2019 08:00'), EndDate: new Date('02/17/2019 08:00'), Duration: 2, Progress: '100', Predecessor: '9FS', ParentID: 7 },
            { TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/17/2019 08:00'), EndDate: new Date('02/17/2019 08:00'), Duration: 0, Predecessor: '10FS', ParentID: 7 }
        ];
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            parentID: 'ParentID'
        };
        this.timelineSettings = {
            timelineUnitSize: 65,
            topTier: {
                unit: 'Day',
                format: 'MMM dd, yyyy'
            },
            bottomTier: {
                unit: 'Hour',
                format: 'hh:mm a'
            }
        };
        this.dayWorkingTime = [{ from: 0, to: 24 }];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 { Component } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';

@Component({
  selector: 'app-root',
  imports: [GanttModule],
  standalone: true,
  template: `<ejs-gantt [dataSource]="data" height="450px" [taskFields]="taskFields" durationUnit="Hour" timezone="America/New_York"></ejs-gantt>`
})
export class AppComponent {
  public data: object[] = [
    {
      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
    }
  ];
  public taskFields: object = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    parentID: 'parentID'
  };
}

Display tasks without timezone

Without a specified timezone, the Gantt 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 { Component } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';

@Component({
  selector: 'app-root',
  imports: [GanttModule],
  standalone: true,
  template: `<ejs-gantt [dataSource]="data" height="450px" [taskFields]="taskFields" durationUnit="Hour"></ejs-gantt>`
})

export class AppComponent {
  public data: object[] = [
    {
      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
    }
  ];
  public taskFields: object = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    parentID: 'parentID'
  };
}

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 { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, ITaskAddedEventArgs , SelectionService } from '@syncfusion/ej2-angular-gantt'

@Component({
  imports: [GanttModule],
  providers: [EditService, SelectionService],
  standalone: true,
  selector: 'app-root',
  template:
    `<ejs-gantt [dataSource]="data" [editSettings]="editSettings" [taskFields]="taskSettings" [dayWorkingTime]="dayWorkingTime" (actionComplete)="actionComplete($event)" [timelineSettings]="timelineSettings" timezone="America/New_York" durationUnit="Hour" dateFormat="hh:mm a" height="450px" [includeWeekend]="true">`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public timelineSettings?: object;
  public timezoneValue: string = 'UTC';
  public dayWorkingTime?: object[];
  public editSettings?: object;

  public ngOnInit(): void {
    this.data = [
      {
        TaskID: 1, TaskName: 'Project Schedule', StartDate: new Date('02/04/2019 08:00'),
        EndDate: new Date('03/10/2019')
      },
      {
        TaskID: 2, TaskName: 'Planning', StartDate: new Date('02/04/2019 08:00'),
        EndDate: new Date('02/10/2019'), ParentID: 1
      },
      {
        TaskID: 3, TaskName: 'Plan timeline', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('02/10/2019'),
        Duration: 6, Progress: '60', ParentID: 2
      },
      {
        TaskID: 4, TaskName: 'Plan budget', StartDate: new Date('02/04/2019 08:00'),
        EndDate: new Date('02/10/2019'), Duration: 6, Progress: '90', ParentID: 2
      },
      {
        TaskID: 5, TaskName: 'Allocate resources', StartDate: new Date('02/04/2019 08:00'), EndDate: new Date('02/10/2019'),
        Duration: 6, Progress: '75', ParentID: 2
      },
      {
        TaskID: 6, TaskName: 'Planning complete', StartDate: new Date('02/06/2019 08:00'),
        EndDate: new Date('02/10/2019'), Duration: 0, Predecessor: '3FS,4FS,5FS', ParentID: 2
      },
      {
        TaskID: 7, TaskName: 'Design', StartDate: new Date('02/13/2019 08:00'), EndDate: new Date('02/17/2019 08:00'),
        ParentID: 1
      },
      {
        TaskID: 8, TaskName: 'Software Specification', StartDate: new Date('02/13/2019 08:00'), EndDate: new Date('02/15/2019'),
        Duration: 3, Progress: '60', Predecessor: '6FS', ParentID: 7
      },
      {
        TaskID: 9, TaskName: 'Develop prototype', StartDate: new Date('02/13/2019 08:00'), EndDate: new Date('02/15/2019'),
        Duration: 3, Progress: '100', Predecessor: '6FS', ParentID: 7
      },
      {
        TaskID: 10, TaskName: 'Get approval from customer', StartDate: new Date('02/16/2019 08:00'), EndDate: new Date('02/17/2019 08:00'),
        Duration: 2, Progress: '100', Predecessor: '9FS', ParentID: 7
      },
      {
        TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/17/2019 08:00'), EndDate: new Date('02/17/2019 08:00'),
        Duration: 0, Predecessor: '10FS', ParentID: 7
      }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };
    this.timelineSettings = {
      timelineUnitSize: 65,
      topTier: {
        unit: 'Day',
        format: 'MMM dd, yyyy'
      },
      bottomTier: {
        unit: 'Hour',
        format: 'hh:mm a'
      }
    };
    this.dayWorkingTime = [{ from: 0, to: 24 }];
  }

  public actionComplete(args: ITaskAddedEventArgs ) {
    if (args.action == "TaskbarEditing") {
      console.log(args.data.ganttProperties.endDate);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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/Tokya");
    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