diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts index ca161e9b2d63..8faf3b88f9cd 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts +++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts @@ -47,7 +47,12 @@ export class AppComponent { currentView = this.views[0]; - ariaDescription = () => { + formatHour = (hours: number) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: '2-digit', + }); + + disabledDatesDescription = () => { const disabledDates = this.holidays .filter((date) => !this.isWeekend(date)) .map((date) => new Date(date).toLocaleDateString('en-US', { @@ -66,6 +71,16 @@ export class AppComponent { return ''; }; + disabledTimeDescription = () => { + const from = this.formatHour(this.dinnerTime.from); + const to = this.formatHour(this.dinnerTime.to); + return `The time range from ${from} to ${to} is disabled on all days`; + }; + + ariaDescription = () => [this.disabledDatesDescription(), this.disabledTimeDescription()] + .filter(Boolean) + .join('. '); + constructor(public dataService: DataService) { this.dinnerTime = this.dataService.getDinnerTime(); this.holidays = this.dataService.getHolidays(); diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx index 8a7c20c8c4c1..e327124941e3 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx @@ -4,7 +4,7 @@ import Scheduler from 'devextreme-react/scheduler'; import type { SchedulerTypes } from 'devextreme-react/scheduler'; import type { FormRef } from 'devextreme-react/form'; import notify from 'devextreme/ui/notify'; -import { data, holidays } from './data.ts'; +import { data, dinnerTime, holidays } from './data.ts'; import Utils from './utils.ts'; import DataCell from './DataCell.tsx'; import DataCellMonth from './DataCellMonth.tsx'; @@ -13,7 +13,12 @@ import TimeCell from './TimeCell.tsx'; const currentDate = new Date(2021, 3, 27); const views: SchedulerTypes.ViewType[] = ['workWeek', 'month']; -const ariaDescription = () => { +const formatHour = (hours: number) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: '2-digit', +}); + +const disabledDatesDescription = () => { const disabledDates = holidays .filter((date) => !Utils.isWeekend(date)) .map((date) => new Date(date).toLocaleDateString('en-US', { @@ -32,6 +37,16 @@ const ariaDescription = () => { return ''; }; +const disabledTimeDescription = () => { + const from = formatHour(dinnerTime.from); + const to = formatHour(dinnerTime.to); + return `The time range from ${from} to ${to} is disabled on all days`; +}; + +const ariaDescription = () => [disabledDatesDescription(), disabledTimeDescription()] + .filter(Boolean) + .join('. '); + const notifyDisableDate = () => { notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000); }; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js index 5c3a51926885..17288306e2e7 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js @@ -1,7 +1,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import Scheduler from 'devextreme-react/scheduler'; import notify from 'devextreme/ui/notify'; -import { data, holidays } from './data.js'; +import { data, dinnerTime, holidays } from './data.js'; import Utils from './utils.js'; import DataCell from './DataCell.js'; import DataCellMonth from './DataCellMonth.js'; @@ -10,7 +10,12 @@ import TimeCell from './TimeCell.js'; const currentDate = new Date(2021, 3, 27); const views = ['workWeek', 'month']; -const ariaDescription = () => { +const formatHour = (hours) => + new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: '2-digit', + }); +const disabledDatesDescription = () => { const disabledDates = holidays .filter((date) => !Utils.isWeekend(date)) .map((date) => @@ -29,6 +34,13 @@ const ariaDescription = () => { } return ''; }; +const disabledTimeDescription = () => { + const from = formatHour(dinnerTime.from); + const to = formatHour(dinnerTime.to); + return `The time range from ${from} to ${to} is disabled on all days`; +}; +const ariaDescription = () => + [disabledDatesDescription(), disabledTimeDescription()].filter(Boolean).join('. '); const notifyDisableDate = () => { notify( 'Cannot create or move an appointment/event to disabled time/date regions.', diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue index c0d7267b9e17..e0e94ef635be 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue @@ -47,7 +47,7 @@ import { computed, ref } from 'vue'; import { DxForm } from 'devextreme-vue'; import { DxScheduler, type DxSchedulerTypes } from 'devextreme-vue/scheduler'; import notify from 'devextreme/ui/notify'; -import { data, holidays } from './data.ts'; +import { data, dinnerTime, holidays } from './data.ts'; import Utils from './utils.ts'; import DataCell from './DataCell.vue'; import DataCellMonth from './DataCellMonth.vue'; @@ -61,7 +61,12 @@ const dataSource = data; const isMonthView = computed(() => currentView.value === 'month'); -const ariaDescription = computed(() => { +const formatHour = (hours: number) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: '2-digit', +}); + +const disabledDatesDescription = () => { const disabledDates = holidays .filter((date) => !Utils.isWeekend(date)) .map((date) => new Date(date).toLocaleDateString('en-US', { @@ -78,7 +83,17 @@ const ariaDescription = computed(() => { return `${disabledDates.join(', ')} are disabled dates`; } return ''; -}); +}; + +const disabledTimeDescription = () => { + const from = formatHour(dinnerTime.from); + const to = formatHour(dinnerTime.to); + return `The time range from ${from} to ${to} is disabled on all days`; +}; + +const ariaDescription = computed(() => [disabledDatesDescription(), disabledTimeDescription()] + .filter(Boolean) + .join('. ')); function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) { setComponentAria(e.component?.$element()); diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js index 092da457e244..b1699f385efb 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js +++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js @@ -92,7 +92,12 @@ const holidays = [ new Date(2021, 5, 6), ]; -const ariaDescription = () => { +const formatHour = (hours) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: '2-digit', +}); + +const disabledDatesDescription = () => { const disabledDates = holidays .filter((date) => !isWeekend(date)) .map((date) => new Date(date).toLocaleDateString('en-US', { @@ -111,6 +116,16 @@ const ariaDescription = () => { return ''; }; +const disabledTimeDescription = () => { + const from = formatHour(dinnerTime.from); + const to = formatHour(dinnerTime.to); + return `The time range from ${from} to ${to} is disabled on all days`; +}; + +const ariaDescription = () => [disabledDatesDescription(), disabledTimeDescription()] + .filter(Boolean) + .join('. '); + function notifyDisableDate() { DevExpress.ui.notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000); }