DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the Scheduler features used.
Backend API
<dx-scheduler
timeZone="America/Los_Angeles"
[dataSource]="dataSource"
[views]="['month']"
currentView="month"
[currentDate]="currentDate"
[firstDayOfWeek]="1"
[startDayHour]="8"
[endDayHour]="18"
[showAllDayPanel]="false"
[height]="710"
[groups]="['employeeID']"
resourceCellTemplate="resourceCellTemplate"
dataCellTemplate="dataCellTemplate"
>
<dxi-scheduler-resource
fieldExpr="employeeID"
[allowMultiple]="false"
[dataSource]="resourcesDataSource"
label="Employee"
icon="group"
>
</dxi-scheduler-resource>
<div *dxTemplate="let employee of 'resourceCellTemplate'">
<div class="name" [style.background]="employee.color">
<h2>{{ employee.text }}</h2>
</div>
<div class="avatar" title="{{ employee.text }}">
<img [src]="employee.data.avatar" alt="{{ employee.text }} photo" />
</div>
<div class="info" [style.color]="employee.color">
Age: {{ employee.data.age }}
<br />
<b>{{ employee.data.discipline }}</b>
</div>
</div>
<div
*dxTemplate="let cellData of 'dataCellTemplate'"
class="employee-weekend"
[ngClass]="markWeekEnd | apply : cellData"
>
<div class="day-cell" [ngClass]="markTraining | apply : cellData">{{
cellData.text
}}</div>
</div>
</dx-scheduler>
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, enableProdMode, Pipe, PipeTransform, provideZoneChangeDetection } from '@angular/core';
import { NgClass } from '@angular/common';
import { DxSchedulerModule } from 'devextreme-angular';
import { DataSource } from 'devextreme-angular/common/data';
import { Service, Employee, Data } from './app.service';
@Pipe({ name: 'apply', standalone: true })
export class ApplyPipe<TArgs, TReturn> implements PipeTransform {
transform(func: ((...args: TArgs[]) => TReturn), ...args: TArgs[]): TReturn { return func(...args); }
}
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Service],
imports: [
DxSchedulerModule,
ApplyPipe,
NgClass,
],
})
export class AppComponent {
dataSource: DataSource;
currentDate: Date = new Date(2021, 5, 2, 11, 30);
resourcesDataSource: Employee[];
constructor(service: Service) {
this.dataSource = new DataSource({
store: service.getData(),
});
this.resourcesDataSource = service.getEmployees();
}
markWeekEnd = (cellData: Data & { groups: Data }) => {
function isWeekEnd(date: 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;
};
markTraining = (cellData: Data & { groups: Data }) => {
const classObject = {
'day-cell': true,
};
classObject[AppComponent.getCurrentTraining(cellData.startDate.getDate(), cellData.groups.employeeID)] = true;
return classObject;
};
static getCurrentTraining = (date: number, employeeID: number) => `training-background-${(date + employeeID) % 3}`;
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
],
});
::ng-deep .dx-scheduler-group-header,
::ng-deep .dx-scheduler-date-table-cell {
position: relative;
}
::ng-deep .dx-scheduler-group-header-content {
padding-left: 8px;
}
::ng-deep .dx-color-scheme-light,
::ng-deep .dx-color-scheme-carmine,
::ng-deep .dx-color-scheme-softblue,
::ng-deep .dx-color-scheme-blue-light,
::ng-deep .dx-color-scheme-saas-light,
::ng-deep .dx-color-scheme-lime-light,
::ng-deep .dx-color-scheme-orange-light,
::ng-deep .dx-color-scheme-purple-light,
::ng-deep .dx-color-scheme-teal-light {
--text-color-1: rgba(0, 0, 0, .6);
--text-color-2: rgba(255, 255, 255, 1);
--disabled-color: rgba(0, 0, 0, 0.38);
--background-color-1: rgba(50, 134, 56, 1);
--background-color-2: rgba(194, 81, 0, 1);
}
::ng-deep .dx-color-scheme-dark,
::ng-deep .dx-color-scheme-darkviolet,
::ng-deep .dx-color-scheme-darkmoon,
::ng-deep .dx-color-scheme-blue-dark,
::ng-deep .dx-color-scheme-saas-dark,
::ng-deep .dx-color-scheme-lime-dark,
::ng-deep .dx-color-scheme-orange-dark,
::ng-deep .dx-color-scheme-purple-dark,
::ng-deep .dx-color-scheme-teal-dark {
--text-color-1: rgba(255, 255, 255, 1);
--text-color-2: rgba(54, 54, 64, 1);
--disabled-color: rgba(255, 255, 255, 0.38);
--background-color-1: rgba(159, 213, 161, 1);
--background-color-2: rgba(255, 181, 127, 1);
}
::ng-deep .dx-scheduler-header .dx-toolbar .dx-button,
::ng-deep .dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
color: var(--text-color-1);
}
::ng-deep .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
opacity: 1;
color: var(--disabled-color) !important;
}
::ng-deep .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
color: var(--text-color-1);
}
::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment,
::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment.dx-state-focused {
color: var(--text-color-2);
line-height: 22px;
}
::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
padding-top: 0;
}
::ng-deep .dx-scheduler-date-table-cell .dx-template-wrapper {
position: absolute;
height: 100%;
width: 100%;
padding-right: 6px;
}
::ng-deep .avatar {
width: 124px;
float: left;
overflow: hidden;
position: relative;
height: 124px;
border: 1px solid rgba(0, 0, 0, 0.24);
border-radius: 50%;
background-color: rgba(255, 255, 255, 1);
}
::ng-deep .avatar img {
position: relative;
width: 126px;
height: 130px;
object-fit: contain;
}
::ng-deep .avatar[title="John Heart"] img {
top: 5px;
left: 3px;
}
::ng-deep .avatar[title="Greta Sims"] img {
top: 5px;
left: -7px;
}
::ng-deep .name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
::ng-deep .name h2 {
color: var(--text-color-2);
font-size: 28px;
text-align: left;
padding: 0 0 0 170px;
margin: 0;
height: 40px;
line-height: 40px;
}
::ng-deep .info {
width: auto;
text-align: left;
height: 100%;
font-size: 14px;
line-height: 20px;
font-weight: normal;
padding: 25px 20px 25px 40px;
color: #707070;
}
::ng-deep .dx-color-scheme-contrast .info {
color: #fff;
}
::ng-deep .day-cell {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
}
::ng-deep .dx-scheduler-appointment {
color: rgba(255, 255, 255, 1);
}
::ng-deep .employee-1 {
background-color: rgba(55, 126, 58, 0.08);
}
::ng-deep .employee-2 {
background-color: rgba(194, 81, 0, 0.08);
}
::ng-deep .employee-weekend-1 {
background-color: rgba(55, 126, 58, 0.12);
}
::ng-deep .employee-weekend-2 {
background-color: rgba(194, 81, 0, 0.12);
}
::ng-deep .training-background-0 {
background-image: url("../../../../images/Scheduler/Overview/icon-abs.png");
}
::ng-deep .training-background-1 {
background-image: url("../../../../images/Scheduler/Overview/icon-step.png");
}
::ng-deep .training-background-2 {
background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png");
}
import { Injectable } from '@angular/core';
export class Employee {
text: string;
id: number;
color: string;
avatar: string;
age: number;
discipline: string;
}
export class Data {
text: string;
employeeID: number;
startDate: Date;
endDate: Date;
}
const employees: Employee[] = [{
text: 'John Heart',
id: 1,
color: 'var(--background-color-1)',
avatar: '../../../../images/employees/19.png',
age: 27,
discipline: 'ABS, Fitball, StepFit',
}, {
text: 'Greta Sims',
id: 2,
color: 'var(--background-color-2)',
avatar: '../../../../images/employees/31.png',
age: 25,
discipline: 'ABS, Fitball, StepFit',
}];
const data: 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'),
},
];
@Injectable()
export class Service {
getEmployees() {
return employees;
}
getData() {
return data;
}
}
<!DOCTYPE html>
<html 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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></script>
</body>
</html>
�PNG
IHDR # # ٳY tEXtSoftware Adobe ImageReadyq�e< �IDATx���N�@��*"�(*�P�Fo�� �O� � ^5�"����u6�M&�ni��\t�O�)ugfg6�ei�b��C���Db"1����~�\.�~�(9�Kb�$��5(!�R�G�� !��~ �D���0�4��
�>!j2�q��&q@T�� �4 ��du6��g�Rp̊v���x�%,���7K ຂ灋ɡ4,&űX�<vC����Л�����N�w��jzS���H�%�eC"l���H�mi���`
�kA�9' � IBD�����Vu��7_�i�Nj@T�E@S�"�+��H����]�_(d�%aN&�����#3� 'p}�M����)u\'�����ɿw�X�v�G�6f���h�)�3�wD [v��<s�E�O� ̱:{6B����#�An�Dlc^Yld��U �{�k�Li1��ET��~X:/���YAQ�?FZ�\������N��7��8�^S�9��$�VO ���E
�` w�g���kN IEND�B`�
�PNG
IHDR # # ٳY tEXtSoftware Adobe ImageReadyq�e< �IDATx��kKQ��Үf��ͨ(����~��� �?IIb��deFi7�w�]8 �������; ܗ�93Gî놆�FBCd��@L &��/� �l֯�Q���
hx�2�Lg1>X���� �
J�����A�n�-�5#)Y�|m�G�J�Y�b_��3(wZ��,�: �+�贕HZU����+>)�I��b�ym�K���%��H�*�?l��>�
L��:�� l�i-z�����l��D�)w�cXo-2u�C-�s�AH�v��Ԟ_� ]H��l�`�`T�MU^C�a~ev��Uߣ]�ާ6 �@�"��s�����LZ{�D)���-!���:Dˋd���� �4�j���y�gK/p�8J��.F�ܾ5iZ�6�q�J믰��aN��4�����eGm�2E4��2�jlxECz��͒��_�5�ӜL�)��ì: TL7ks߂5��3�`��a���[� ��e��ܖ� IEND�B`�
�PNG
IHDR # # ٳY tEXtSoftware Adobe ImageReadyq�e< �IDATx�̖]KA�w�>��>�oH�(/���?��y�UA])�VdV"�)�d�;�
ð��:�Ӂw�Y��;�9��8��
k
���(�ϻ��,=��`tA|��9
��� ��`ф3�< U�-�� �7'�q��i1G��_���
�H����KsC�ҩ�ذ� ��3p �`��_�t�7� �|֦��:xa� �
� N�F<�6��5�����M�̔#��� �f�i�:��MԐ�2����Rm<���՝�"@ ��ǺWƞM�aיIVb,�Ӽa�a�T�G5�9���LY�O�;��JDGw6��_MW��Ů��(�[{�%��(�ܥ�0�ڢ�]��+Lg�J�Qڌ����S��,�Q �M S]��ڦ�ɖ i�rf]�u*&8%=����rFdO\ꥫ&�L\ �ɻ�FEV��Ά|�ۺ�% ���SC�P&�'�)+ud�E�5�����` ��^PёC� IEND�B`�