Timezone in ASP.NET Core Scheduler

The Scheduler 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. Apart from the default action of applying a specific timezone to the Scheduler, it is also possible to set different time zone values for each appointment through the properties startTimezone and endTimezone, which can be defined as separate fields within the event fields collection.

Note: The timezone property is applicable only for appointment processing and the current time indication.

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 a 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.

Scheduler with no timezone

When no specific time zone is set on the Scheduler, appointments are displayed based on the client system’s timezone, which is the default behavior. Here, the same appointment, when viewed from a different timezone, will have different start and end times.

The following code example displays an appointment from 9:00 AM to 10:00 AM when you open the Scheduler from any timezone. This is because the start and end time are enclosed with new Date(), which works based on the client browser’s timezone.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>
public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 1,
        Subject = "Meeting",
        StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2018, 2, 15, 12, 30, 0)
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Scheduler set to specific timezone

When a timezone is set on the Scheduler through the timezone property, the appointments are displayed exactly based on the Scheduler timezone, regardless of the client timezone. In ASP.NET Core applications, the client timezone is added by default. In order to render the appointments in the timezone that has been set on the Scheduler, add the following code snippet in your Startup.cs file as shown below.

public void ConfigureServices(IServiceCollection services) {
    services.AddDbContext<ScheduleDataContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("ScheduleDataConnection"))
    );
    services.AddMvc()
        .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver())
        .AddJsonOptions(options => options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore)
        .AddJsonOptions(opt => opt.SerializerSettings.DateFormatHandling = DateFormatHandling.MicrosoftDateFormat)
        .AddJsonOptions(opt => opt.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc);
}
public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ScheduleDataContext>(options => options.UseSqlServer(Configuration.GetConnectionString("ScheduleDataConnection")));
    services.AddControllersWithViews(option => option.EnableEndpointRouting = false).AddNewtonsoftJson();
    services.AddControllersWithViews()
        .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver())
        .AddNewtonsoftJson(opt => opt.SerializerSettings.DateFormatHandling = Newtonsoft.Json.DateFormatHandling.MicrosoftDateFormat)
        .AddNewtonsoftJson(opt => opt.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local);
}

In the following code example, appointments are displayed based on Eastern Time (UTC -05:00).

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" timezone="America/New_York" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>
public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2018, 2, 15, 12, 30, 0)
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Display events on same time everywhere with no time difference

Setting timezone to UTC for the Scheduler will display the appointments at the same time as in the database for all the users in different time zones.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" timezone="UTC" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>
public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2018, 2, 15, 12, 30, 0)
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Set specific timezone for events

It is possible to set a different timezone for Scheduler events by setting the startTimezone and endTimezone properties within the eventSettings option. This allows each appointment to maintain a different timezone and be displayed on the Scheduler with the appropriate time differences.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>
public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
        StartTimezone = "Europe/Moscow",
        EndTimezone = "Europe/Moscow"
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public string StartTimezone { get; set; }
    public string EndTimezone { get; set; }
}

Add or remove timezone names to/from the timezone collection

Instead of displaying all the timezone names within the timezone collection (more than 200 are displayed on the editor window timezone fields by default), you can customize the timezone collection at the application end as shown in the following example.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

<script type="text/javascript">
    var data = [{ Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' }, { Value: 'UTC', Text: 'UTC' }, { Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard Time' }];
    var timezoneData = ej.schedule.timezoneData;
    timezoneData.splice.apply(timezoneData, [0, timezoneData.length].concat(data));
</script>
public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    List<ScheduleView> viewOption = new List<ScheduleView>()
    {
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Month }
    };
    ViewBag.view = viewOption;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 1,
        Subject = "Meeting",
        StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2018, 2, 15, 12, 30, 0)
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { 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); //-60

convert

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.000Z

add

This method is used to add the time difference between passed UTC date and timezone.

Parameters Type Description
Date Date UTC time 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.add(date, "Europe/Paris");
    console.log(convertedDate); //2018-12-05T05:25:11.000Z

remove

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

removeLocalOffset

This method is used to remove the local offset time from the date passed.

Parameters Type Description
Date Date UTC as date object.

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.removeLocalOffset(date);
    console.log(convertedDate); //2018-12-05T15:25:11.000Z

NOTE

You can refer to our ASP.NET Core Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Scheduler example to know how to present and manipulate data.