DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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:

Day and Month views use default settings.

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.1.6/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; }
const data = [{ text: 'Walking a dog', priorityId: 1, typeId: 1, startDate: new Date('2021-04-26T15:00:00.000Z'), endDate: new Date('2021-04-26T15:30:00.000Z'), recurrenceRule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502', }, { text: 'Website Re-Design Plan', priorityId: 2, typeId: 2, startDate: new Date('2021-04-26T16:00:00.000Z'), endDate: new Date('2021-04-26T18:30:00.000Z'), }, { text: 'Book Flights to San Fran for Sales Trip', priorityId: 2, typeId: 2, startDate: new Date('2021-04-26T19:00:00.000Z'), endDate: new Date('2021-04-26T20:00:00.000Z'), }, { text: 'Install New Router in Dev Room', priorityId: 1, typeId: 2, startDate: new Date('2021-04-26T21:30:00.000Z'), endDate: new Date('2021-04-26T22:30:00.000Z'), }, { text: 'Go Grocery Shopping', priorityId: 1, typeId: 1, startDate: new Date('2021-04-27T01:30:00.000Z'), endDate: new Date('2021-04-27T02:30:00.000Z'), recurrenceRule: 'FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502', }, { text: 'Approve Personal Computer Upgrade Plan', priorityId: 2, typeId: 2, startDate: new Date('2021-04-27T17:00:00.000Z'), endDate: new Date('2021-04-27T18:00:00.000Z'), }, { text: 'Final Budget Review', priorityId: 2, typeId: 2, startDate: new Date('2021-04-27T19:00:00.000Z'), endDate: new Date('2021-04-27T20:35:00.000Z'), }, { text: 'New Brochures', priorityId: 2, typeId: 2, startDate: new Date('2021-04-27T21:30:00.000Z'), endDate: new Date('2021-04-27T22:45:00.000Z'), }, { text: 'Install New Database', priorityId: 1, typeId: 2, startDate: new Date('2021-04-28T16:45:00.000Z'), endDate: new Date('2021-04-28T18:15:00.000Z'), }, { text: 'Approve New Online Marketing Strategy', priorityId: 2, typeId: 2, startDate: new Date('2021-04-28T19:00:00.000Z'), endDate: new Date('2021-04-28T21:00:00.000Z'), }, { text: 'Upgrade Personal Computers', priorityId: 1, typeId: 2, startDate: new Date('2021-04-28T22:15:00.000Z'), endDate: new Date('2021-04-28T23:30:00.000Z'), }, { text: 'Prepare 2021 Marketing Plan', priorityId: 2, typeId: 2, startDate: new Date('2021-04-29T18:00:00.000Z'), endDate: new Date('2021-04-29T20:30:00.000Z'), }, { text: 'Brochure Design Review', priorityId: 1, typeId: 2, startDate: new Date('2021-04-29T21:00:00.000Z'), endDate: new Date('2021-04-29T22:30:00.000Z'), }, { text: 'Create Icons for Website', priorityId: 2, typeId: 2, startDate: new Date('2021-04-30T17:00:00.000Z'), endDate: new Date('2021-04-30T18:30:00.000Z'), }, { text: 'Upgrade Server Hardware', priorityId: 1, typeId: 2, startDate: new Date('2021-04-30T21:30:00.000Z'), endDate: new Date('2021-04-30T23:00:00.000Z'), }, { text: 'Submit New Website Design', priorityId: 2, typeId: 2, startDate: new Date('2021-04-30T23:30:00.000Z'), endDate: new Date('2021-05-01T01:00:00.000Z'), }, { text: 'Launch New Website', priorityId: 2, typeId: 2, startDate: new Date('2021-04-30T19:20:00.000Z'), endDate: new Date('2021-04-30T21:00:00.000Z'), }, { text: 'Visiting a Doctor', priorityId: 2, typeId: 1, startDate: new Date('2021-05-01T17:00:00.000Z'), endDate: new Date('2021-05-01T20:30:00.000Z'), }, ]; const priorityData = [{ text: 'Low Priority', id: 1, color: '#fcb65e', }, { text: 'High Priority', id: 2, color: '#e18e92', }, ]; const typeData = [{ text: 'Home', id: 1, color: '#b6d623', }, { text: 'Work', id: 2, color: '#679ec5', }, ];