Timezone
17 Feb 202224 minutes to read
The Gantt makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the timezone property needs to be used.
Understanding date manipulation in JavaScript
The new Date() in JavaScript returns the exact current date object with complete time and timezone information. For example, it may return value such as Wed Dec 12 2018 05:23:27 GMT+0530 (India Standard Time) which indicates that the current date is December 12, 2018 and the current time is 5.23 AM on browsers following the IST timezone.
Display same time everywhere with no time difference
Setting timezone to UTC for Gantt will display the same time as in the database for all the users in different time zone.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" timezone="UTC" durationUnit="Hour"
height="450px" includeWeekend="true" dateFormat="hh:mm a">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID">
</e-gantt-taskfields>
<e-gantt-dayworkingtimecollection>
<e-gantt-dayworkingtime from="0" to="24"></e-gantt-dayworkingtime>
</e-gantt-dayworkingtimecollection>
<e-gantt-timelinesettings timelineUnitSize="65">
<e-timelinesettings-toptier unit="Day" format="MMM dd, y"></e-timelinesettings-toptier>
<e-timelinesettings-bottomtier unit="Hour" format="hh:mm a"></e-timelinesettings-bottomtier>
</e-gantt-timelinesettings>
</ejs-gantt>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
return View();
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project schedule",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 03, 10)
};
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Planning",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
ParentID = 1
};
GanttDataSource Record3 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Plan timeline",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 6,
Progress = 60,
ParentID = 2
};
GanttDataSource Record4 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Plan budget",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 6,
Progress = 90,
ParentID = 2
};
GanttDataSource Record5 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Allocate resources",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 6,
Progress = 75,
ParentID = 2
};
GanttDataSource Record6 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Planning complete",
StartDate = new DateTime(2019, 02, 06, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 0,
Predecessor = "3, 4, 5",
ParentID = 2
};
GanttDataSource Record7 = new GanttDataSource()
{
TaskId = 7,
TaskName = "Design",
StartDate = new DateTime(2019, 02, 13, 08, 00, 00),
EndDate = new DateTime(2019, 02, 17),
ParentID = 1
};
GanttDataSource Record8 = new GanttDataSource()
{
TaskId = 8,
TaskName = "Software specification",
StartDate = new DateTime(2019, 02, 13, 08, 00, 00),
EndDate = new DateTime(2019, 02, 15),
Duration = 3,
Progress = 60,
Predecessor = "6",
ParentID = 7
};
GanttDataSource Record9 = new GanttDataSource()
{
TaskId = 9,
TaskName = "Develop prototype",
StartDate = new DateTime(2019, 02, 13, 08, 00, 00),
EndDate = new DateTime(2019, 02, 15),
Duration = 3,
Progress = 100,
Predecessor = "6",
ParentID = 7
};
GanttDataSource Record10 = new GanttDataSource()
{
TaskId = 10,
TaskName = "Get approval from customer",
StartDate = new DateTime(2019, 02, 16, 08, 00, 00),
EndDate = new DateTime(2019, 02, 17),
Duration = 2,
Progress = 100,
Predecessor = "9",
ParentID = 7
};
GanttDataSource Record11 = new GanttDataSource()
{
TaskId = 11,
TaskName = "Design complete",
StartDate = new DateTime(2019, 02, 17, 08, 00, 00),
EndDate = new DateTime(2019, 02, 17),
Duration = 0,
Predecessor = "10",
ParentID = 7
};
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
GanttDataSourceCollection.Add(Record3);
GanttDataSourceCollection.Add(Record4);
GanttDataSourceCollection.Add(Record5);
GanttDataSourceCollection.Add(Record6);
GanttDataSourceCollection.Add(Record7);
GanttDataSourceCollection.Add(Record8);
GanttDataSourceCollection.Add(Record9);
GanttDataSourceCollection.Add(Record10);
GanttDataSourceCollection.Add(Record11);
return GanttDataSourceCollection;
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public string Predecessor { get; set; }
public int ParentID { get; set; }
}CRUD operations with timezone
CRUD operations can be performed with timezone, and the gantt is rendered based on the timezone specified in the load time. All the editing actions will be done based on the user timezone, but on database save action, we have reversed this conversion to local time and provided data to client side events for better understanding purpose. Refer to the following code example.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" timezone="America/New_York" durationUnit="Hour"
height="450px" includeWeekend="true" dateFormat="hh:mm a">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"
allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
<e-gantt-dayworkingtimecollection>
<e-gantt-dayworkingtime from="0" to="24"></e-gantt-dayworkingtime>
</e-gantt-dayworkingtimecollection>
<e-gantt-timelinesettings timelineUnitSize="65">
<e-timelinesettings-toptier unit="Day" format="MMM dd, y"></e-timelinesettings-toptier>
<e-timelinesettings-bottomtier unit="Hour" format="hh:mm a"></e-timelinesettings-bottomtier>
</e-gantt-timelinesettings>
</ejs-gantt>public IActionResult Index()
{
ViewBag.DataSource = ganttData();
return View();
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project schedule",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 03, 10)
};
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Planning",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
ParentID = 1
};
GanttDataSource Record3 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Plan timeline",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 6,
Progress = 60,
ParentID = 2
};
GanttDataSource Record4 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Plan budget",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 6,
Progress = 90,
ParentID = 2
};
GanttDataSource Record5 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Allocate resources",
StartDate = new DateTime(2019, 02, 04, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 6,
Progress = 75,
ParentID = 2
};
GanttDataSource Record6 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Planning complete",
StartDate = new DateTime(2019, 02, 06, 08, 00, 00),
EndDate = new DateTime(2019, 02, 10),
Duration = 0,
Predecessor = "3, 4, 5",
ParentID = 2
};
GanttDataSource Record7 = new GanttDataSource()
{
TaskId = 7,
TaskName = "Design",
StartDate = new DateTime(2019, 02, 13, 08, 00, 00),
EndDate = new DateTime(2019, 02, 17),
ParentID = 1
};
GanttDataSource Record8 = new GanttDataSource()
{
TaskId = 8,
TaskName = "Software specification",
StartDate = new DateTime(2019, 02, 13, 08, 00, 00),
EndDate = new DateTime(2019, 02, 15),
Duration = 3,
Progress = 60,
Predecessor = "6",
ParentID = 7
};
GanttDataSource Record9 = new GanttDataSource()
{
TaskId = 9,
TaskName = "Develop prototype",
StartDate = new DateTime(2019, 02, 13, 08, 00, 00),
EndDate = new DateTime(2019, 02, 15),
Duration = 3,
Progress = 100,
Predecessor = "6",
ParentID = 7
};
GanttDataSource Record10 = new GanttDataSource()
{
TaskId = 10,
TaskName = "Get approval from customer",
StartDate = new DateTime(2019, 02, 16, 08, 00, 00),
EndDate = new DateTime(2019, 02, 17),
Duration = 2,
Progress = 100,
Predecessor = "9",
ParentID = 7
};
GanttDataSource Record11 = new GanttDataSource()
{
TaskId = 11,
TaskName = "Design complete",
StartDate = new DateTime(2019, 02, 17, 08, 00, 00),
EndDate = new DateTime(2019, 02, 17),
Duration = 0,
Predecessor = "10",
ParentID = 7
};
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
GanttDataSourceCollection.Add(Record3);
GanttDataSourceCollection.Add(Record4);
GanttDataSourceCollection.Add(Record5);
GanttDataSourceCollection.Add(Record6);
GanttDataSourceCollection.Add(Record7);
GanttDataSourceCollection.Add(Record8);
GanttDataSourceCollection.Add(Record9);
GanttDataSourceCollection.Add(Record10);
GanttDataSourceCollection.Add(Record11);
return GanttDataSourceCollection;
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public string Predecessor { get; set; }
public int ParentID { get; set; }
}Timezone methods
offset
This method is used to calculate the difference between passed UTC date and timezone.
| Parameters | Type | Description |
|---|---|---|
| Date | Date | UTC time as date object. |
| Timezone | String | Timezone. |
Returns number
// Assume your local timezone as IST/UTC+05:30
var timezone = new ej.schedule.Timezone();
var date = new Date(2018,11,5,15,25,11);
var timeZoneOffset = timezone.offset(date,"Europe/Paris");
console.log(timeZoneOffset); //-60convert
This method is used to convert the passed date from one timezone to another timezone.
| Parameters | Type | Description |
|---|---|---|
| Date | Date | UTC time as date object. |
| fromOffset | number/string | Timezone from which date need to be converted. |
| toOffset | number/string | Timezone to which date need to be converted. |
Returns Date
// Assume your local timezone as IST/UTC+05:30
var timezone = new ej.schedule.Timezone();
var date = new Date(2018,11,5,15,25,11);
var convertedDate = timezone.convert(date, "Europe/Paris", "Asia/Tokyo");
var convertedDate1 = timezone.convert(date, 60, -360);
console.log(convertedDate); //2018-12-05T17:55:11.000Z
console.log(convertedDate1); //2018-12-05T16:55:11.000Zremove
This method is used to remove the time difference between passed UTC date and timezone.
| Parameters | Type | Description |
|---|---|---|
| Date | Date | UTC as date object. |
| Timezone | String | Timezone. |
Returns Date
// Assume your local timezone as IST/UTC+05:30
var timezone = new ej.schedule.Timezone();
var date = new Date(2018,11,5,15,25,11);
var convertedDate = timezone.remove(date, "Europe/Paris");
console.log(convertedDate); //2018-12-05T14:25:11.000Z