Your search did not match any results.
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
Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.options = { timeZone: "America/Los_Angeles", height: 600, dataSource: data, showAllDayPanel: false, views: ["day", { type: "week", groups: ["typeId"], dateCellTemplate: "dateCellTemplate" }, { type: "workWeek", startDayHour: 9, endDayHour: 18, groups: ["priorityId"], dateCellTemplate: "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/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.1.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" ng-app="DemoApp" ng-controller="DemoController"> <div dx-scheduler="options", dx-item-alias="data"> <div data-options="dxTemplate:{name:'dateCellTemplate'}"> <div class="name">{{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][data.date.getDay()]}}</div> <div class="number">{{data.date.getDate()}}</div> </div> </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 }
var 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") } ]; var priorityData = [{ text: "Low Priority", id: 1, color: "#fcb65e" }, { text: "High Priority", id: 2, color: "#e18e92" } ]; var typeData = [{ text: "Home", id: 1, color: "#b6d623" }, { text: "Work", id: 2, color: "#679ec5" } ];