DevExtreme v24.2 is now available.

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

Your search did not match any results.

JavaScript/jQuery Scheduler - Group Orientation

Users can group appointments by resources. This demo declares a single resource—Priority. Refer to the following demo for more information about resources and their configuration: Resources.

To group appointments by resources, specify the groups[] array. Each element of this array is the fieldExpr of a corresponding resource kind. The order of group headers in the UI is the same as items in the resource instances array. If the groups[] array contains more than one element, groups are nested.

Backend API
$(() => { $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: data, views: [{ type: 'workWeek', name: 'Vertical Grouping', groupOrientation: 'vertical', cellDuration: 60, intervalCount: 2, }, { type: 'workWeek', name: 'Horizontal Grouping', groupOrientation: 'horizontal', cellDuration: 30, intervalCount: 2, }], currentView: 'Vertical Grouping', crossScrollingEnabled: true, currentDate: new Date(2021, 3, 21), startDayHour: 9, endDayHour: 16, groups: ['priorityId'], resources: [ { fieldExpr: 'priorityId', allowMultiple: false, dataSource: priorityData, label: 'Priority', }, ], showCurrentTimeIndicator: false, showAllDayPanel: false, }); });
<!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-cell-sizes-horizontal { width: 100px; }
const data = [ { text: 'Website Re-Design Plan', priorityId: 2, startDate: new Date('2021-04-19T16:30:00.000Z'), endDate: new Date('2021-04-19T18:30:00.000Z'), }, { text: 'Book Flights to San Fran for Sales Trip', priorityId: 1, startDate: new Date('2021-04-22T17:00:00.000Z'), endDate: new Date('2021-04-22T19:00:00.000Z'), }, { text: 'Install New Router in Dev Room', priorityId: 1, startDate: new Date('2021-04-19T20:00:00.000Z'), endDate: new Date('2021-04-19T22:30:00.000Z'), }, { text: 'Approve Personal Computer Upgrade Plan', priorityId: 2, startDate: new Date('2021-04-20T17:00:00.000Z'), endDate: new Date('2021-04-20T18:00:00.000Z'), }, { text: 'Final Budget Review', priorityId: 2, startDate: new Date('2021-04-20T19:00:00.000Z'), endDate: new Date('2021-04-20T20:35:00.000Z'), }, { text: 'New Brochures', priorityId: 2, startDate: new Date('2021-04-19T20:00:00.000Z'), endDate: new Date('2021-04-19T22:15:00.000Z'), }, { text: 'Install New Database', priorityId: 1, startDate: new Date('2021-04-20T16:00:00.000Z'), endDate: new Date('2021-04-20T19:15:00.000Z'), }, { text: 'Approve New Online Marketing Strategy', priorityId: 2, startDate: new Date('2021-04-21T19:00:00.000Z'), endDate: new Date('2021-04-21T21:00:00.000Z'), }, { text: 'Upgrade Personal Computers', priorityId: 1, startDate: new Date('2021-04-19T16:00:00.000Z'), endDate: new Date('2021-04-19T18:30:00.000Z'), }, { text: 'Prepare 2021 Marketing Plan', priorityId: 2, startDate: new Date('2021-04-22T18:00:00.000Z'), endDate: new Date('2021-04-22T20:30:00.000Z'), }, { text: 'Brochure Design Review', priorityId: 1, startDate: new Date('2021-04-21T18:00:00.000Z'), endDate: new Date('2021-04-21T20:30:00.000Z'), }, { text: 'Create Icons for Website', priorityId: 2, startDate: new Date('2021-04-23T17:00:00.000Z'), endDate: new Date('2021-04-23T18:30:00.000Z'), }, { text: 'Upgrade Server Hardware', priorityId: 1, startDate: new Date('2021-04-23T16:00:00.000Z'), endDate: new Date('2021-04-23T22:00:00.000Z'), }, { text: 'Submit New Website Design', priorityId: 2, startDate: new Date('2021-04-23T23:30:00.000Z'), endDate: new Date('2021-04-24T01:00:00.000Z'), }, { text: 'Launch New Website', priorityId: 2, startDate: new Date('2021-04-23T19:20:00.000Z'), endDate: new Date('2021-04-23T21:00:00.000Z'), }, { text: 'Google AdWords Strategy', priorityId: 1, startDate: new Date('2021-04-26T16:00:00.000Z'), endDate: new Date('2021-04-26T19:00:00.000Z'), }, { text: 'Rollout of New Website and Marketing Brochures', priorityId: 1, startDate: new Date('2021-04-26T20:00:00.000Z'), endDate: new Date('2021-04-26T22:30:00.000Z'), }, { text: 'Non-Compete Agreements', priorityId: 2, startDate: new Date('2021-04-27T20:00:00.000Z'), endDate: new Date('2021-04-27T22:45:00.000Z'), }, { text: 'Approve Hiring of John Jeffers', priorityId: 2, startDate: new Date('2021-04-27T16:00:00.000Z'), endDate: new Date('2021-04-27T19:00:00.000Z'), }, { text: 'Update NDA Agreement', priorityId: 1, startDate: new Date('2021-04-27T18:00:00.000Z'), endDate: new Date('2021-04-27T21:15:00.000Z'), }, { text: 'Update Employee Files with New NDA', priorityId: 1, startDate: new Date('2021-04-30T16:00:00.000Z'), endDate: new Date('2021-04-30T18:45:00.000Z'), }, { text: 'Submit Questions Regarding New NDA', priorityId: 1, startDate: new Date('2021-04-28T17:00:00.000Z'), endDate: new Date('2021-04-28T18:30:00.000Z'), }, { text: 'Submit Signed NDA', priorityId: 1, startDate: new Date('2021-04-28T20:00:00.000Z'), endDate: new Date('2021-04-28T22:00:00.000Z'), }, { text: 'Review Revenue Projections', priorityId: 2, startDate: new Date('2021-04-28T18:00:00.000Z'), endDate: new Date('2021-04-28T21:00:00.000Z'), }, { text: 'Comment on Revenue Projections', priorityId: 2, startDate: new Date('2021-04-26T17:00:00.000Z'), endDate: new Date('2021-04-26T20:00:00.000Z'), }, { text: 'Provide New Health Insurance Docs', priorityId: 2, startDate: new Date('2021-04-30T19:00:00.000Z'), endDate: new Date('2021-04-30T22:00:00.000Z'), }, { text: 'Review Changes to Health Insurance Coverage', priorityId: 2, startDate: new Date('2021-04-29T16:00:00.000Z'), endDate: new Date('2021-04-29T20:00:00.000Z'), }, { text: 'Review Training Course for any Omissions', priorityId: 1, startDate: new Date('2021-04-29T18:00:00.000Z'), endDate: new Date('2021-04-29T21:00:00.000Z'), }, ]; const priorityData = [ { text: 'Low Priority', id: 1, color: '#1e90ff', }, { text: 'High Priority', id: 2, color: '#ff9747', }, ];

The JavaScript Scheduler can arrange group headers vertically (in a column) or horizontally (in a row). Use the views.groupOrientation property to set a custom orientation for specific views. This demo shows two Work Week views with different group orientations.