@model IEnumerable<DevExtreme.MVC.Demos.Models.Event>
<div class="option">
<span>Office Time Zone</span>
@(Html.DevExtreme().SelectBox()
.Width(240)
.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 getLocations = function(date) {
const timeZones = DevExpress.utils.getTimeZones(date);
return timeZones.filter(function(timeZone) {
return locations.indexOf(timeZone.id) !== -1;
});
};
const locations = ["Europe/London", "Europe/Berlin", "Europe/Helsinki"];
const currentDate = new Date(2021, 4, 25);
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 DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult TimeZonesSupport() {
return View(SampleData.Events);
}
}
}
namespace DevExtreme.MVC.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.MVC.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;
}