@model IEnumerable<DevExtreme.NETCore.Demos.Models.Event>
@{
var locations = new[] {
new { TimeZoneId = "America/Los_Angeles", Text = "Los Angeles (UTC-08:00)" },
new { TimeZoneId = "America/New_York", Text = "New York (UTC-05:00)" },
new { TimeZoneId = "Europe/Berlin", Text = "Berlin (UTC+01:00)" }
};
}
<div class="option">
<span>Office Time Zone</span>
@(Html.DevExtreme().SelectBox()
.DataSource(locations)
.Width(240)
.Value(locations[0].TimeZoneId)
.DisplayExpr("Text")
.ValueExpr("TimeZoneId")
.OnValueChanged(@<text>
function(e) {
var scheduler = $(".scheduler").dxScheduler("instance");
scheduler.option("timeZone", e.value);
}
</text>)
)
</div>
@(Html.DevExtreme().Scheduler()
.DataSource(Model)
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.TextExpr("Text")
.RecurrenceRuleExpr("RecurrenceRule")
.Views(new[] { SchedulerViewType.WorkWeek })
.CurrentView(SchedulerViewType.WorkWeek)
.CurrentDate(new DateTime(2017, 5, 25))
.TimeZone(locations[0].TimeZoneId)
.Height(600)
.Editing(e => e.AllowTimeZoneEditing(true))
.ElementAttr("class", "scheduler")
)
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"
}, 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"
}, new Event {
Text = "New Brochures",
StartDate = "2017-05-26T18:30:00.000Z",
EndDate = "2017-05-26T18:45:00.000Z"
}, new Event {
Text = "Website Re-Design Plan",
StartDate = "2017-05-23T12:30:00.000Z",
EndDate = "2017-05-23T13:30:00.000Z"
}, new Event {
Text = "Book Flights to San Fran for Sales Trip",
StartDate = "2017-05-24T16:00:00.000Z",
EndDate = "2017-05-24T15:00:00.000Z"
}, new Event {
Text = "Prepare 2017 Marketing Plan",
StartDate = "2017-05-22T07:00:00.000Z",
EndDate = "2017-05-22T09:30:00.000Z"
}, new Event {
Text = "Launch New Website",
StartDate = "2017-05-24T08:00:00.000Z",
EndDate = "2017-05-24T10:00:00.000Z"
}, new Event {
Text = "Submit New Website Design",
StartDate = "2017-05-25T09:30:00.000Z",
EndDate = "2017-05-25T11:00:00.000Z"
}, new Event {
Text = "Upgrade Server Hardware",
StartDate = "2017-05-26T06:30:00.000Z",
EndDate = "2017-05-26T08:00:00.000Z"
}, new Event {
Text = "Approve New Online Marketing Strategy",
StartDate = "2017-05-26T11:00:00.000Z",
EndDate = "2017-05-26T12:30:00.000Z"
}, new Event {
Text = "Final Budget Review",
StartDate = "2017-05-23T09:00:00.000Z",
EndDate = "2017-05-23T10:35:00.000Z"
}
};
}
}
.option {
display: flex;
}
.option > span {
display: flex;
align-items: center;
margin-right: 10px;
}
.dx-scheduler {
margin-top: 20px;
}
