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.

See more Hide details

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.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

$(() => { 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: 600, 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"> <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/22.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.6/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; }

Customize Individual Views

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC