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.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@model DevExtreme.NETCore.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.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 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; }