Scheduling / Planning ▸ 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.

Work Hours:

@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;
}