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.

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

​x
 
@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>​​

xxxxxxxxxx
 
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            });        }    }}

xxxxxxxxxx
 
.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;}​