Your search did not match any results.
Scheduler

Overview

DevExtreme JavaScript Scheduler is a responsive scheduling component 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.

Backend API
Copy to CodePen
Apply
Reset
const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { const dataSource = new DevExpress.data.DataSource({ store: data, }); $scope.schedulerOptions = { timeZone: 'America/Los_Angeles', dataSource, views: ['month'], currentView: 'month', currentDate: new Date(2021, 5, 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) { const result = (date + employeeID) % 3; const 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/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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.2.3/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%; padding-right: 6px; } .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; }
const 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', }]; const data = [ { text: 'Helen', employeeID: 2, startDate: new Date('2021-06-01T16:30:00.000Z'), endDate: new Date('2021-06-01T18:30:00.000Z'), }, { text: 'Helen', employeeID: 2, startDate: new Date('2021-06-10T16:30:00.000Z'), endDate: new Date('2021-06-11T18:30:00.000Z'), }, { text: 'Alex', employeeID: 1, startDate: new Date('2021-06-02T16:30:00.000Z'), endDate: new Date('2021-06-02T18:30:00.000Z'), }, { text: 'Alex', employeeID: 1, startDate: new Date('2021-06-11T19:00:00.000Z'), endDate: new Date('2021-06-11T20:00:00.000Z'), }, { text: 'Alex', employeeID: 2, startDate: new Date('2021-06-16T16:30:00.000Z'), endDate: new Date('2021-06-16T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-07T16:30:00.000Z'), endDate: new Date('2021-06-07T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-28T16:30:00.000Z'), endDate: new Date('2021-06-28T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-30T16:30:00.000Z'), endDate: new Date('2021-06-30T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 2, startDate: new Date('2021-06-04T16:30:00.000Z'), endDate: new Date('2021-06-04T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 2, startDate: new Date('2021-06-07T16:30:00.000Z'), endDate: new Date('2021-06-07T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 1, startDate: new Date('2021-06-21T16:30:00.000Z'), endDate: new Date('2021-06-21T18:30:00.000Z'), }, { text: 'Kelly', employeeID: 2, startDate: new Date('2021-06-15T16:30:00.000Z'), endDate: new Date('2021-06-15T18:30:00.000Z'), }, { text: 'Kelly', employeeID: 2, startDate: new Date('2021-06-29T16:30:00.000Z'), endDate: new Date('2021-06-29T18:30:00.000Z'), }, ];