JavaScript/jQuery Scheduler - Customize Individual Views

To customize a view, configure its settings in an object inside the views[] array. You should specify the view's type and other properties to override global view settings.

This demo customizes two views - Week and Work Week - in the following manner:

Both views group appointments by resources.
Both views use the dateCellTemplate to change the appearance of date cells.
The Work Week view uses the startDayHour and endDayHour properties to set custom first and last hours on the time scale.

Day and Month views use default settings.

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 dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const dateCellTemplate = function (cellData, index, container) { container.append( $('<div />') .addClass('name') .text(dayOfWeekNames[cellData.date.getDay()]), $('<div />') .addClass('number') .text(cellData.date.getDate()), ); }; $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', height: 730, dataSource: data, showAllDayPanel: false, views: ['day', { type: 'week', groups: ['typeId'], dateCellTemplate, }, { type: 'workWeek', startDayHour: 9, endDayHour: 18, groups: ['priorityId'], dateCellTemplate, }, 'month'], currentView: 'workWeek', currentDate: new Date(2021, 3, 27), startDayHour: 7, endDayHour: 23, resources: [{ fieldExpr: 'priorityId', allowMultiple: false, dataSource: priorityData, label: 'Priority', }, { fieldExpr: 'typeId', allowMultiple: false, dataSource: typeData, label: 'Type', }], }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.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/24.2.3/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 id="scheduler"></div> </div> </body> </html>

.dx-scheduler-work-space-week .dx-scheduler-header-panel-cell, .dx-scheduler-work-space-work-week .dx-scheduler-header-panel-cell { text-align: center; vertical-align: middle; } .dx-scheduler-work-space .dx-scheduler-header-panel-cell .name { font-size: 13px; line-height: 15px; } .dx-scheduler-work-space .dx-scheduler-header-panel-cell .number { font-size: 15px; line-height: 15px; }