Scheduler - Work Shifts

This demo uses the Scheduler component’s offset property to indicate the starting point of a day. The Scheduler’s offset can be set in multiples of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours).

For instance, if you set the offset to -120, like the First shift in this demo, the day begins at 10:00 PM on the previous day instead of 00:00. If you set the offset to 360, like the Second shift, the day begins at 6:00 AM.

You can also combine this property with startDayHour, endDayHour, and cellDuration to obtain desired display results.

Backend API

@model DevExtreme.MVC.Demos.ViewModels.WorkShiftsViewModel <div class="options"> <div class="option"> <div class="label">Work Hours:</div> <div class="value"> @(Html.DevExtreme().RadioGroup() .DataSource(Model.WorkShifts) .DisplayExpr("Text") .ValueExpr("Offset") .Value(-120) .Layout(Orientation.Horizontal) .OnValueChanged("OnShiftChanged") ) </div> </div> </div> <br /> @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.Appointments) .TimeZone("America/Los_Angeles") .Views(new[] { SchedulerViewType.Day, SchedulerViewType.WorkWeek, }) .CurrentView(SchedulerViewType.WorkWeek) .CurrentDate(new DateTime(2021, 3, 30)) .StartDayHour(0) .EndDayHour(8) .Offset(-120) .CellDuration(60) .ShowAllDayPanel(false) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") ) <script> function OnShiftChanged(e) { var scheduler = $("#scheduler").dxScheduler("instance"); scheduler.option('offset', e.value); } </script>

using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SchedulerController : Controller { public ActionResult WorkShifts() { return View(new WorkShiftsViewModel { Appointments = SampleData.WorkShiftsAppointments, WorkShifts = SampleData.WorkShifts }); } } }

.options { background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; display: flex; align-items: flex-start; height: 100%; } .option { padding: 16px; display: flex; align-items: center; } .label, .value { display: inline-block; vertical-align: middle; } .label { width: 100px; }