Scheduler - Time Zone Support

DevExtreme Scheduler allows you to specify time zones used for the component and associated events/appointments. In this demo, you can change the time zone using the SelectBox positioned above the Scheduler. A getTimeZones() method call populates the SelectBox with appropriate values.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.Event> <div class="option"> <span>Office Time Zone</span> @(Html.DevExtreme().SelectBox() .Width(240) .InputAttr("aria-label", "Time Zone") .ElementAttr("class", "selectBox") .DisplayExpr("title") .ValueExpr("id") .OnValueChanged("onSelectBoxValueChanged") ) </div> @(Html.DevExtreme().Scheduler() .DataSource(Model) .StartDateExpr("StartDate") .EndDateExpr("EndDate") .TextExpr("Text") .RecurrenceRuleExpr("RecurrenceRule") .Views(new[] { SchedulerViewType.WorkWeek }) .CurrentView(SchedulerViewType.WorkWeek) .CurrentDate(new DateTime(2021, 4, 27)) .StartDayHour(8) .Height(600) .Editing(e => e.AllowTimeZoneEditing(true)) .ElementAttr("class", "scheduler") .OnOptionChanged("onSchedulerOptionChanged") .OnAppointmentFormOpening("onAppointmentFormOpening") ) <script> const locations = ["Europe/London", "Europe/Berlin", "Europe/Helsinki"]; const currentDate = new Date(2021, 4, 25); const getLocations = (date) => DevExpress.utils.getTimeZones(date, locations) const demoLocations = getLocations(currentDate); function onSelectBoxValueChanged(e) { getScheduler().option("timeZone", e.value); } function onSchedulerOptionChanged(e) { if (e.name === "currentDate") { getSelectBox().option("items", getLocations(e.value)); } } function onAppointmentFormOpening(e) { const form = e.form; const startDateTimezoneEditor = form.getEditor("startDateTimeZone"); const endDateTimezoneEditor = form.getEditor("endDateTimeZone"); const startDatedataSource = startDateTimezoneEditor.option("dataSource"); const endDateDataSource = endDateTimezoneEditor.option("dataSource"); startDatedataSource.filter(["id", "contains", "Europe"]); endDateDataSource.filter(["id", "contains", "Europe"]); startDatedataSource.load(); endDateDataSource.load(); } function getSelectBox() { return $(".selectBox").dxSelectBox("instance"); } function getScheduler() { return $(".scheduler").dxScheduler("instance"); } $(function () { const selectBox = getSelectBox(); selectBox.option("items", demoLocations); selectBox.option("value", demoLocations[0].id); const scheduler = getScheduler(); scheduler.option("timeZone", demoLocations[0].id); }) </script>

using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; namespace DevExtreme.NETCore.Demos.Controllers { public class SchedulerController : Controller { public ActionResult TimeZonesSupport() { return View(SampleData.Events); } } }

namespace DevExtreme.NETCore.Demos.Models { public class Event { public string Text { get; set; } public string StartDate { get; set; } public string EndDate { get; set; } public string RecurrenceRule { get; set; } public string StartDateTimeZone { get; set; } public string EndDateTimeZone { get; set; } } }

using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Event> Events = new[] { new Event { Text = "Stand-up meeting", StartDate = "2021-04-26T15:30:00.000Z", EndDate = "2021-04-26T15:45:00.000Z", RecurrenceRule = "FREQ=DAILY" }, new Event { Text = "Book Flights to San Fran for Sales Trip", StartDate = "2021-04-28T18:00:00.000Z", EndDate = "2021-04-28T19:00:00.000Z" }, new Event { Text = "New Brochures", StartDate = "2021-04-30T18:30:00.000Z", EndDate = "2021-04-30T18:45:00.000Z" }, new Event { Text = "Website Re-Design Plan", StartDate = "2021-04-27T12:30:00.000Z", EndDate = "2021-04-27T13:30:00.000Z" }, new Event { Text = "Book Flights to San Fran for Sales Trip", StartDate = "2021-04-28T16:00:00.000Z", EndDate = "2021-04-28T15:00:00.000Z" }, new Event { Text = "Prepare 2021 Marketing Plan", StartDate = "2021-04-26T07:00:00.000Z", EndDate = "2021-04-26T09:30:00.000Z" }, new Event { Text = "Launch New Website", StartDate = "2021-04-28T08:00:00.000Z", EndDate = "2021-04-28T10:00:00.000Z" }, new Event { Text = "Submit New Website Design", StartDate = "2021-04-29T09:30:00.000Z", EndDate = "2021-04-29T11:00:00.000Z" }, new Event { Text = "Upgrade Server Hardware", StartDate = "2021-04-30T06:30:00.000Z", EndDate = "2021-04-30T08:00:00.000Z" }, new Event { Text = "Approve New Online Marketing Strategy", StartDate = "2021-04-30T11:00:00.000Z", EndDate = "2021-04-30T12:30:00.000Z" }, new Event { Text = "Final Budget Review", StartDate = "2021-04-27T09:00:00.000Z", EndDate = "2021-04-27T10:35:00.000Z" } }; } }

.option { display: flex; } .option > span { display: flex; align-items: center; margin-right: 10px; } .dx-scheduler { margin-top: 20px; }

To define the time zone at the component level, assign an IANA time zone value to the timeZone property.

To modify time zones used for appointments, enable the editing.allowTimeZoneEditing option. Our Scheduler supports different time zones for appointment start and end dates (startDateTimeZone and endDateTimeZone appointment properties).