Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Overview
DevExtreme HTML5 JavaScript Scheduler is a responsive scheduling widget available as an AngularJS directive. Behaving like a native component, Scheduler supports two-way binding to scope properties and declarative configuration. In this demo, Scheduler is highly customized using templates. Refer to other demos in this section for a detailed overview of other Schdeuler features, like Google Calendar integration, time zones support, appointment grouping, etc.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var dataSource = new DevExpress.data.DataSource({
store: data
});
$scope.schedulerOptions = {
timeZone: "America/Los_Angeles",
dataSource: dataSource,
views: ["month"],
currentView: "month",
currentDate: new Date(2021, 7, 2, 11, 30),
firstDayOfWeek: 1,
startDayHour: 8,
endDayHour: 18,
showAllDayPanel: false,
height: 600,
groups: ['employeeID'],
resources: [
{
fieldExpr: 'employeeID',
allowMultiple: false,
dataSource: employees,
label: 'Employee'
}
],
resourceCellTemplate: 'resourceCellTemplate',
dataCellTemplate: 'dataCellTemplate'
};
$scope.markWeekEnd = function (cellData) {
function isWeekEnd(date) {
const day = date.getDay();
return day === 0 || day === 6;
}
const classObject = {};
classObject["employee-" + cellData.groups.employeeID] = true;
classObject['employee-weekend-' + cellData.groups.employeeID] = isWeekEnd(cellData.startDate);
return classObject;
};
$scope.markTraining = function (cellData) {
const classObject = {
"day-cell": true
};
classObject[getCurrentTraining(cellData.startDate.getDate(), cellData.groups.employeeID)] = true;
return classObject;
};
function getCurrentTraining(date, employeeID) {
var result = (date + employeeID) % 3,
currentTraining = "training-background-" + result;
return currentTraining;
}
});
<!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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/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/20.2.4/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="schedulerOptions" dx-item-alias="employee">
<div data-options="dxTemplate:{name:'resourceCellTemplate'}">
<div class='name' ng-style="{ backgroundColor: employee.color }"><h2>{{employee.text}}</h2></div>
<div class='avatar'> <img ng-src="{{employee.data.avatar}}" /></div>
<div class='info' ng-style="{ color: employee.color }">Age: {{employee.data.age}}<br /><b>{{employee.data.discipline}}</b></div>
</div>
<div data-options="dxTemplate:{name:'dataCellTemplate'}" ng-class="markWeekEnd(employee)">
<div ng-class="markTraining(employee)">
{{employee.text}}
</div>
</div>
</div>
</div>
</body>
</html>
.dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
opacity: 1;
color: rgba(0, 0, 0, 0.3);
}
.dx-scheduler-group-header, .dx-scheduler-date-table-cell {
position: relative;
}
.dx-scheduler-date-table-cell .dx-template-wrapper {
position: absolute;
height: 100%;
width: 100%;
}
.avatar {
width: 155px;
float: left;
overflow: hidden;
position: relative;
height: 125px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.name h2 {
color: #fff;
text-align: left;
padding: 0 0 5px 175px;
margin: 0;
}
.info {
width: auto;
text-align: left;
height: 100%;
font-size: 11pt;
font-weight: normal;
padding: 25px 20px;
color: #707070;
}
.dx-color-scheme-contrast .info {
color: #FFF;
}
.day-cell {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.employee-1 {
background-color: rgba(86, 202, 133, 0.1);
}
.employee-2 {
background-color: rgba(255, 151, 71, 0.1);
}
.employee-weekend-1 {
background-color: rgba(86, 202, 133, 0.2);
}
.employee-weekend-2 {
background-color: rgba(255, 151, 71, 0.2);
}
.training-background-0 {
background-image: url("../../../../images/gym/icon-abs.png");
}
.training-background-1 {
background-image: url("../../../../images/gym/icon-step.png");
}
.training-background-2 {
background-image: url("../../../../images/gym/icon-fitball.png");
}
.dx-theme-material .name h2 {
font-size: 28px;
}
var employees = [{
text : "John Heart",
id: 1,
color: "#56ca85",
avatar: "../../../../images/gym/coach-man.png",
age: 27,
discipline: "ABS, Fitball, StepFit"
}, {
text : "Sandra Johnson",
id: 2,
color: "#ff9747",
avatar: "../../../../images/gym/coach-woman.png",
age: 25,
discipline: "ABS, Fitball, StepFit"
}];
var data = [{
text: "Helen",
employeeID: 2,
startDate: new Date("2021-07-27T16:30:00.000Z"),
endDate: new Date("2021-07-27T18:30:00.000Z")
}, {
text: "Helen",
employeeID: 2,
startDate: new Date("2021-08-05T16:30:00.000Z"),
endDate: new Date("2021-08-06T18:30:00.000Z")
}, {
text: "Alex",
employeeID: 1,
startDate: new Date("2021-07-28T16:30:00.000Z"),
endDate: new Date("2021-07-28T18:30:00.000Z")
}, {
text: "Alex",
employeeID: 1,
startDate: new Date("2021-08-06T19:00:00.000Z"),
endDate: new Date("2021-08-06T20:00:00.000Z")
}, {
text: "Alex",
employeeID: 2,
startDate: new Date("2021-08-11T16:30:00.000Z"),
endDate: new Date("2021-08-11T18:30:00.000Z")
}, {
text: "Stan",
employeeID: 1,
startDate: new Date("2021-08-02T16:30:00.000Z"),
endDate: new Date("2021-08-02T18:30:00.000Z")
}, {
text: "Stan",
employeeID: 1,
startDate: new Date("2021-08-23T16:30:00.000Z"),
endDate: new Date("2021-08-23T18:30:00.000Z")
}, {
text: "Stan",
employeeID: 1,
startDate: new Date("2021-08-25T16:30:00.000Z"),
endDate: new Date("2021-08-25T18:30:00.000Z")
},
{
text: "Rachel",
employeeID: 2,
startDate: new Date("2021-07-30T16:30:00.000Z"),
endDate: new Date("2021-07-30T18:30:00.000Z")
}, {
text: "Rachel",
employeeID: 2,
startDate: new Date("2021-08-02T16:30:00.000Z"),
endDate: new Date("2021-08-02T18:30:00.000Z")
}, {
text: "Rachel",
employeeID: 1,
startDate: new Date("2021-08-16T16:30:00.000Z"),
endDate: new Date("2021-08-16T18:30:00.000Z")
}, {
text: "Kelly",
employeeID: 2,
startDate: new Date("2021-08-10T16:30:00.000Z"),
endDate: new Date("2021-08-10T18:30:00.000Z")
}, {
text: "Kelly",
employeeID: 2,
startDate: new Date("2021-08-24T16:30:00.000Z"),
endDate: new Date("2021-08-24T18:30:00.000Z")
}];