@model IEnumerable<DevExtreme.NETCore.Demos.Models.Event>
@{
var locations = new[] {
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.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 readonly IEnumerable<Event> Events = new[] {
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;
}