Your search did not match any results.

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.

The 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.

Backend API
Copy to CodePen
$(function(){ $("#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=""> <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=""></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="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></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; }
var 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") } ]; var priorityData = [ { text: "Low Priority", id: 1, color: "#1e90ff" }, { text: "High Priority", id: 2, color: "#ff9747" } ];