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

$(() => { const scheduler = $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: data, views: ['day', 'workWeek'], currentView: 'workWeek', currentDate: new Date(2021, 2, 30), startDayHour: 0, endDayHour: 8, offset: shifts[0].offset, cellDuration: 60, showAllDayPanel: false, }).dxScheduler('instance'); $('#shifts').dxRadioGroup({ items: shifts, value: shifts[0], layout: 'horizontal', onValueChanged: (e) => { scheduler.option('offset', e.value.offset); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="options"> <div class="option"> <div class="label">Work Hours:</div> <div class="value"> <div id="shifts"></div> </div> </div> </div> <br /> <div id="scheduler"></div> </div> </body> </html>

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