Time Zones Support
Documentation
The Scheduler widget can show appointments in different time zones. The current time zone is specified using the timeZome option is utilized. In this demo, you can change the time zone of an appointment in the appointment details form. To make the time zone selectors visible, the onAppointmentFormOpening is utilized.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
@model IEnumerable<DevExtreme.NETCore.Demos.Models.Event>
@{
var locations = new object[] {
new { Value = "America/Los_Angeles", Text = "Los Angeles", Color = "#1e90ff" },
new { Value = "America/New_York", Text = "New York", Color = "#56ca85" },
new { Value = "Europe/Berlin", Text = "Berlin", Color = "#ff9747" }
};
}
@(Html.DevExtreme().Scheduler()
.DataSource(Model)
.DataSourceOptions(o => o.Filter("['StartDateTimeZone', 'America/Los_Angeles']"))
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.TextExpr("Text")
.RecurrenceRuleExpr("RecurrenceRule")
.StartDateTimeZoneExpr("StartDateTimeZone")
.EndDateTimeZoneExpr("EndDateTimeZone")
.Views(new SchedulerViewType[] {
SchedulerViewType.WorkWeek
})
.CurrentView(SchedulerViewType.WorkWeek)
.CurrentDate(new DateTime(2017, 5, 25))
.StartDayHour(8)
.Height(600)
.TimeZone("America/Los_Angeles")
.Resources(res => {
res.Add()
.DataSource(locations)
.FieldExpr("StartDateTimeZone")
.ColorExpr("Color")
.DisplayExpr("Text")
.ValueExpr("Value");
})
.OnAppointmentFormOpening(@<text>
function(e) {
e.form.itemOption("StartDateTimeZone", { visible: true });
e.form.itemOption("EndDateTimeZone", { visible: true });
}
</text>)
.ElementAttr("class", "scheduler")
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Office Location</span>
@(Html.DevExtreme().SelectBox()
.DataSource(locations)
.Width(200)
.Value("America/Los_Angeles")
.DisplayExpr("Text")
.ValueExpr("Value")
.OnValueChanged(@<text>
function(e) {
var scheduler = $(".scheduler").dxScheduler("instance"),
dataSource = scheduler.getDataSource();
dataSource.filter(["StartDateTimeZone", e.value]);
scheduler.option("timeZone", e.value);
}
</text>)
)
</div>
</div>
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
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 List<Event> Events {
get {
return new List<Event> {
new Event {
Text = "Stand-up meeting",
StartDate = "2017-05-22T15:30:00.000Z",
EndDate = "2017-05-22T15:45:00.000Z",
RecurrenceRule = "FREQ=DAILY",
StartDateTimeZone = "America/Los_Angeles",
EndDateTimeZone = "America/Los_Angeles"
},
new Event {
Text = "Website Re-Design Plan",
StartDate = "2017-05-23T16:30:00.000Z",
EndDate = "2017-05-23T18:30:00.000Z",
StartDateTimeZone = "America/Los_Angeles",
EndDateTimeZone = "America/Los_Angeles"
},
new Event {
Text = "Book Flights to San Fran for Sales Trip",
StartDate = "2017-05-24T18:00:00.000Z",
EndDate = "2017-05-24T19:00:00.000Z",
StartDateTimeZone = "America/Los_Angeles",
EndDateTimeZone = "America/Los_Angeles"
},
new Event {
Text = "Install New Router in Dev Room",
StartDate = "2017-05-25T17:00:00.000Z",
EndDate = "2017-05-25T21:30:00.000Z",
StartDateTimeZone = "America/Los_Angeles",
EndDateTimeZone = "America/Los_Angeles"
},
new Event {
Text = "Approve Personal Computer Upgrade Plan",
StartDate = "2017-05-26T16:00:00.000Z",
EndDate = "2017-05-26T17:00:00.000Z",
StartDateTimeZone = "America/Los_Angeles",
EndDateTimeZone = "America/Los_Angeles"
},
new Event {
Text = "New Brochures",
StartDate = "2017-05-26T19:30:00.000Z",
EndDate = "2017-05-26T20:45:00.000Z",
StartDateTimeZone = "America/Los_Angeles",
EndDateTimeZone = "America/Los_Angeles"
},
new Event {
Text = "Daily meeting",
StartDate = "2017-05-22T12:30:00.000Z",
EndDate = "2017-05-22T12:45:00.000Z",
RecurrenceRule = "FREQ=DAILY",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "Website Re-Design Plan",
StartDate = "2017-05-23T13:30:00.000Z",
EndDate = "2017-05-23T14:30:00.000Z",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "Book Flights to San Fran for Sales Trip",
StartDate = "2017-05-24T14:00:00.000Z",
EndDate = "2017-05-24T15:00:00.000Z",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "Install New Router in Dev Room",
StartDate = "2017-05-25T14:30:00.000Z",
EndDate = "2017-05-25T17:30:00.000Z",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "Approve Personal Computer Upgrade Plan",
StartDate = "2017-05-23T15:00:00.000Z",
EndDate = "2017-05-23T16:00:00.000Z",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "New Brochures",
StartDate = "2017-05-26T13:30:00.000Z",
EndDate = "2017-05-26T14:45:00.000Z",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "Upgrade Personal Computers",
StartDate = "2017-05-26T15:15:00.000Z",
EndDate = "2017-05-26T16:30:00.000Z",
StartDateTimeZone = "America/New_York",
EndDateTimeZone = "America/New_York"
},
new Event {
Text = "Prepare 2017 Marketing Plan",
StartDate = "2017-05-22T07:00:00.000Z",
EndDate = "2017-05-22T09:30:00.000Z",
StartDateTimeZone = "Europe/Berlin",
EndDateTimeZone = "Europe/Berlin"
},
new Event {
Text = "Launch New Website",
StartDate = "2017-05-24T08:00:00.000Z",
EndDate = "2017-05-24T10:00:00.000Z",
StartDateTimeZone = "Europe/Berlin",
EndDateTimeZone = "Europe/Berlin"
},
new Event {
Text = "Submit New Website Design",
StartDate = "2017-05-25T09:30:00.000Z",
EndDate = "2017-05-25T11:00:00.000Z",
StartDateTimeZone = "Europe/Berlin",
EndDateTimeZone = "Europe/Berlin"
},
new Event {
Text = "Upgrade Server Hardware",
StartDate = "2017-05-26T06:30:00.000Z",
EndDate = "2017-05-26T08:00:00.000Z",
StartDateTimeZone = "Europe/Berlin",
EndDateTimeZone = "Europe/Berlin"
},
new Event {
Text = "Approve New Online Marketing Strategy",
StartDate = "2017-05-26T11:00:00.000Z",
EndDate = "2017-05-26T12:30:00.000Z",
StartDateTimeZone = "Europe/Berlin",
EndDateTimeZone = "Europe/Berlin"
},
new Event {
Text = "Final Budget Review",
StartDate = "2017-05-23T09:00:00.000Z",
EndDate = "2017-05-23T10:35:00.000Z",
StartDateTimeZone = "Europe/Berlin",
EndDateTimeZone = "Europe/Berlin"
}
};
}
}
}
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}