From 91aca8c45738bc042d66df98d89c3939c0f85575 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 11:44:58 +0800
Subject: [PATCH 01/15] initial commit, JS demos

---
 .../Angular/app/app.component.html            |  1 +
 .../Angular/app/app.component.ts              | 31 +++++++++++++++++
 .../Scheduler/CellTemplates/React/App.tsx     | 32 ++++++++++++++++++
 .../Scheduler/CellTemplates/ReactJs/App.js    | 30 +++++++++++++++++
 .../Demos/Scheduler/CellTemplates/Vue/App.vue | 33 +++++++++++++++++++
 .../Scheduler/CellTemplates/jQuery/index.js   | 30 +++++++++++++++++
 6 files changed, 157 insertions(+)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.html
index af3ff308ddb8..4a2c254befea 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.html
@@ -11,6 +11,7 @@
   dataCellTemplate="dataCellTemplate"
   dateCellTemplate="dateCellTemplate"
   timeCellTemplate="timeCellTemplate"
+  (onContentReady)="onContentReady($event)"
   (onAppointmentFormOpening)="onAppointmentFormOpening($event)"
   (onAppointmentAdding)="onAppointmentAdding($event)"
   (onAppointmentUpdating)="onAppointmentUpdating($event)"
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 20101e3397a8..652d81ed8f1d 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -44,12 +44,35 @@ export class AppComponent {
 
   currentView = this.views[0];
 
+  ariaDescription = () => {
+    const disabledDates = this.holidays.map(date => {
+        if (this.isWeekend(date)) {
+          return null;
+        }
+        return new Date(date).toLocaleDateString('en-US', {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })
+      }
+    ).filter(dateText => dateText);
+    
+    if (disabledDates?.length > 0) {
+      return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
+    }
+  };
+
   constructor(public dataService: DataService) {
     this.dataSource = new DataSource({
       store: dataService.getData(),
     });
   }
 
+  onContentReady = (e: DxSchedulerTypes.ContentReadyEvent) => {
+    this.setComponentAria(e.component?.$element());
+  }
+
   onOptionChanged = (e: DxSchedulerTypes.OptionChangedEvent) => {
     if (e.name === 'currentView') {
       this.currentView = e.value;
@@ -148,6 +171,14 @@ export class AppComponent {
     const endDateEditor = form.getEditor('endDate');
     endDateEditor.option('disabledDates', holidays);
   };
+
+  setComponentAria(element): void {
+    element?.attr({
+      'role': 'grid',
+      'aria-label': 'Scheduler',
+      'aria-roledescription': this.ariaDescription(),
+    });
+  }
 }
 
 @NgModule({
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
index c86610486c49..724b96c353c7 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
@@ -13,11 +13,34 @@ import TimeCell from './TimeCell.tsx';
 
 const currentDate = new Date(2021, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['workWeek', 'month'];
+const ariaDescription = () => {
+  const disabledDates = holidays.map(date => 
+    {
+      if (Utils.isWeekend(date)) {
+        return null;
+      }
+      return new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    }
+  );
+  
+  if (disabledDates?.length > 0) {
+    return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
+  }
+};
 
 const notifyDisableDate = () => {
   notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000);
 };
 
+const onContentReady = (e: SchedulerTypes.ContentReadyEvent) => {
+  setComponentAria(e.component?.$element());
+}
+
 const applyDisableDatesToDateEditors = (form: ReturnType<FormRef['instance']>) => {
   const startDateEditor = form.getEditor('startDate');
   startDateEditor?.option('disabledDates', holidays);
@@ -53,6 +76,14 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
   }
 };
 
+const setComponentAria = (element) => {
+  element?.attr({
+    'role': 'grid',
+    'aria-label': 'Scheduler',
+    'aria-roledescription': ariaDescription(),
+  });
+}
+
 const App = () => {
   const [currentView, setCurrentView] = useState<SchedulerTypes.ViewType>(views[0]);
 
@@ -81,6 +112,7 @@ const App = () => {
       dataCellComponent={DataCellComponent}
       dateCellRender={renderDateCell}
       timeCellComponent={TimeCell}
+      onContentReady={onContentReady}
       onAppointmentFormOpening={onAppointmentFormOpening}
       onAppointmentAdding={onAppointmentAdding}
       onAppointmentUpdating={onAppointmentUpdating}
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index e416c38f15f5..abed506dbf72 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -18,12 +18,34 @@ const notifyDisableDate = () => {
     1000,
   );
 };
+const ariaDescription = () => {
+  const disabledDates = holidays.map(date => {
+      if (Utils.isWeekend(date)) {
+        return null;
+      }
+
+      return new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    }
+  );
+  
+  if (disabledDates?.length > 0) {
+    return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
+  }
+};
 const applyDisableDatesToDateEditors = (form) => {
   const startDateEditor = form.getEditor('startDate');
   startDateEditor?.option('disabledDates', holidays);
   const endDateEditor = form.getEditor('endDate');
   endDateEditor?.option('disabledDates', holidays);
 };
+const onContentReady = (e) => {
+  setComponentAria(e.component?.$element());
+}
 const onAppointmentFormOpening = (e) => {
   if (e.appointmentData?.startDate) {
     const startDate = new Date(e.appointmentData.startDate);
@@ -48,6 +70,13 @@ const onAppointmentUpdating = (e) => {
     notifyDisableDate();
   }
 };
+const setComponentAria = (element) => {
+  element.attr({
+    'role': 'grid',
+    'aria-label': 'Scheduler',
+    'aria-roledescription': ariaDescription(),
+  })
+}
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);
   const DataCellComponent = useMemo(
@@ -79,6 +108,7 @@ const App = () => {
       dataCellComponent={DataCellComponent}
       dateCellRender={renderDateCell}
       timeCellComponent={TimeCell}
+      onContentReady={onContentReady}
       onAppointmentFormOpening={onAppointmentFormOpening}
       onAppointmentAdding={onAppointmentAdding}
       onAppointmentUpdating={onAppointmentUpdating}
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
index 2fc978ea6559..0a3f8ac744d7 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
@@ -12,6 +12,7 @@
     data-cell-template="dataCellTemplate"
     date-cell-template="dateCellTemplate"
     time-cell-template="timeCellTemplate"
+    :on-content-ready="onContentReady"
     :on-appointment-form-opening="onAppointmentFormOpening"
     :on-appointment-adding="onAppointmentAdding"
     :on-appointment-updating="onAppointmentUpdating"
@@ -59,6 +60,30 @@ const dataSource = data;
 
 const isMonthView = computed(() => currentView.value === 'month');
 
+const ariaDescription = computed(() => {
+  const disabledDates = holidays
+    .map((date) => {
+      if (Utils.isWeekend(date)) {
+        return null;
+      }
+
+      return new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    }).filter((dateText) => dateText);
+
+  if (disabledDates?.length > 0) {
+    return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
+  }
+});
+
+function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
+  setComponentAria(e.component?.$element());
+}
+
 function onAppointmentFormOpening(e: DxSchedulerTypes.AppointmentFormOpeningEvent) {
   const startDate = new Date(e.appointmentData.startDate);
   if (!Utils.isValidAppointmentDate(startDate)) {
@@ -91,4 +116,12 @@ function applyDisableDatesToDateEditors(form) {
   const endDateEditor = form.getEditor('endDate');
   endDateEditor.option('disabledDates', holidays);
 }
+
+function setComponentAria(element) {
+  element?.attr({
+    role: 'grid',
+    'aria-label': 'Scheduler',
+    'aria-roledescription': ariaDescription.value,
+  });
+}
 </script>
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
index 05be5edeac31..d5a0f42086a0 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
@@ -57,6 +57,10 @@ $(() => {
       return itemElement.append(element);
     },
 
+    onContentReady(e) {
+      setComponentAria(e.component.$element());
+    },
+
     onAppointmentFormOpening(e) {
       const startDate = new Date(e.appointmentData.startDate);
       if (!isValidAppointmentDate(startDate)) {
@@ -87,6 +91,24 @@ const holidays = [
   new Date(2021, 3, 29),
   new Date(2021, 5, 6),
 ];
+const ariaDescription = () => {
+  const disabledDates = holidays.map(date => {
+      if (isWeekend(date)) {
+        return null;
+      }
+      return new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    }
+  );
+  
+  if (disabledDates?.length > 0) {
+    return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
+  }
+};
 
 function notifyDisableDate() {
   DevExpress.ui.notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000);
@@ -156,3 +178,11 @@ function applyDisableDatesToDateEditors(form) {
   const endDateEditor = form.getEditor('endDate');
   endDateEditor.option('disabledDates', holidays);
 }
+
+function setComponentAria(element) {
+  element.attr({
+    'role': 'grid',
+    'aria-label': 'Scheduler',
+    'aria-roledescription': ariaDescription(),
+  });
+}

From ac5f3f151c643dcecf474e7c2c1be0404934b851 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 12:45:57 +0800
Subject: [PATCH 02/15] fix eslint issues

---
 .../Scheduler/CellTemplates/ReactJs/App.js    | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index abed506dbf72..34f51bcfcfe4 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -19,22 +19,21 @@ const notifyDisableDate = () => {
   );
 };
 const ariaDescription = () => {
-  const disabledDates = holidays.map(date => {
-      if (Utils.isWeekend(date)) {
-        return null;
-      }
-
-      return new Date(date).toLocaleDateString('en-US', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      })
+  const disabledDates = holidays.map((date) => {
+    if (Utils.isWeekend(date)) {
+      return null;
     }
-  );
-  
+
+    return new Date(date).toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  });
+
   if (disabledDates?.length > 0) {
-    return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
+    return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
   }
 };
 const applyDisableDatesToDateEditors = (form) => {
@@ -45,7 +44,7 @@ const applyDisableDatesToDateEditors = (form) => {
 };
 const onContentReady = (e) => {
   setComponentAria(e.component?.$element());
-}
+};
 const onAppointmentFormOpening = (e) => {
   if (e.appointmentData?.startDate) {
     const startDate = new Date(e.appointmentData.startDate);
@@ -72,11 +71,11 @@ const onAppointmentUpdating = (e) => {
 };
 const setComponentAria = (element) => {
   element.attr({
-    'role': 'grid',
+    role: 'grid',
     'aria-label': 'Scheduler',
     'aria-roledescription': ariaDescription(),
-  })
-}
+  });
+};
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);
   const DataCellComponent = useMemo(

From 8285b4c25c29e9c054ba75c251134c9a21d98d06 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 13:16:37 +0800
Subject: [PATCH 03/15] Refix eslint

---
 .../Scheduler/CellTemplates/ReactJs/App.js    | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index 34f51bcfcfe4..a0201d33f124 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -11,19 +11,11 @@ import TimeCell from './TimeCell.js';
 
 const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek', 'month'];
-const notifyDisableDate = () => {
-  notify(
-    'Cannot create or move an appointment/event to disabled time/date regions.',
-    'warning',
-    1000,
-  );
-};
 const ariaDescription = () => {
   const disabledDates = holidays.map((date) => {
     if (Utils.isWeekend(date)) {
       return null;
     }
-
     return new Date(date).toLocaleDateString('en-US', {
       weekday: 'long',
       year: 'numeric',
@@ -31,20 +23,26 @@ const ariaDescription = () => {
       day: 'numeric',
     });
   });
-
   if (disabledDates?.length > 0) {
     return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
   }
 };
+const notifyDisableDate = () => {
+  notify(
+    'Cannot create or move an appointment/event to disabled time/date regions.',
+    'warning',
+    1000,
+  );
+};
+const onContentReady = (e) => {
+  setComponentAria(e.component?.$element());
+};
 const applyDisableDatesToDateEditors = (form) => {
   const startDateEditor = form.getEditor('startDate');
   startDateEditor?.option('disabledDates', holidays);
   const endDateEditor = form.getEditor('endDate');
   endDateEditor?.option('disabledDates', holidays);
 };
-const onContentReady = (e) => {
-  setComponentAria(e.component?.$element());
-};
 const onAppointmentFormOpening = (e) => {
   if (e.appointmentData?.startDate) {
     const startDate = new Date(e.appointmentData.startDate);
@@ -70,7 +68,7 @@ const onAppointmentUpdating = (e) => {
   }
 };
 const setComponentAria = (element) => {
-  element.attr({
+  element?.attr({
     role: 'grid',
     'aria-label': 'Scheduler',
     'aria-roledescription': ariaDescription(),

From 9cbae3366eec5bed3521d41dd04910287069c0bd Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 13:47:30 +0800
Subject: [PATCH 04/15] update to set aria-label only..

---
 .../Scheduler/CellTemplates/Angular/app/app.component.ts | 5 ++---
 apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx   | 7 +++----
 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js  | 7 +++----
 apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue     | 5 ++---
 apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js | 9 ++++-----
 5 files changed, 14 insertions(+), 19 deletions(-)

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 652d81ed8f1d..19e90bc3254c 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -173,10 +173,9 @@ export class AppComponent {
   };
 
   setComponentAria(element): void {
+    const prevAria = element?.attr('aria-label') || '';
     element?.attr({
-      'role': 'grid',
-      'aria-label': 'Scheduler',
-      'aria-roledescription': this.ariaDescription(),
+      'aria-label': [prevAria, this.ariaDescription()].filter(Boolean).join(', '),
     });
   }
 }
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
index 724b96c353c7..5aa45099e8d0 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
@@ -26,7 +26,7 @@ const ariaDescription = () => {
         day: 'numeric',
       })
     }
-  );
+  ).filter(dateText => dateText);
   
   if (disabledDates?.length > 0) {
     return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
@@ -77,10 +77,9 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
 };
 
 const setComponentAria = (element) => {
+  const prevAria = element?.attr('aria-label') || '';
   element?.attr({
-    'role': 'grid',
-    'aria-label': 'Scheduler',
-    'aria-roledescription': ariaDescription(),
+    'aria-label': [prevAria, ariaDescription()].filter(Boolean).join(', '),
   });
 }
 
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index a0201d33f124..2a8e64c10881 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -22,7 +22,7 @@ const ariaDescription = () => {
       month: 'long',
       day: 'numeric',
     });
-  });
+  }).filter(dateText => dateText);
   if (disabledDates?.length > 0) {
     return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
   }
@@ -68,10 +68,9 @@ const onAppointmentUpdating = (e) => {
   }
 };
 const setComponentAria = (element) => {
+  const prevAria = element?.attr('aria-label') || '';
   element?.attr({
-    role: 'grid',
-    'aria-label': 'Scheduler',
-    'aria-roledescription': ariaDescription(),
+    'aria-label': [prevAria, ariaDescription()].filter(Boolean).join(', '),
   });
 };
 const App = () => {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
index 0a3f8ac744d7..9474e625a7df 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
@@ -118,10 +118,9 @@ function applyDisableDatesToDateEditors(form) {
 }
 
 function setComponentAria(element) {
+  const prevAria = element?.attr('aria-label') || '';
   element?.attr({
-    role: 'grid',
-    'aria-label': 'Scheduler',
-    'aria-roledescription': ariaDescription.value,
+    'aria-label': [prevAria, ariaDescription.value].filter(Boolean).join(', '),
   });
 }
 </script>
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
index d5a0f42086a0..09184f8427d7 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
@@ -103,7 +103,7 @@ const ariaDescription = () => {
         day: 'numeric',
       })
     }
-  );
+  ).filter(dateText => dateText);
   
   if (disabledDates?.length > 0) {
     return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
@@ -180,9 +180,8 @@ function applyDisableDatesToDateEditors(form) {
 }
 
 function setComponentAria(element) {
-  element.attr({
-    'role': 'grid',
-    'aria-label': 'Scheduler',
-    'aria-roledescription': ariaDescription(),
+  const prevAria = element?.attr('aria-label') || '';
+  element?.attr({
+    'aria-label': [prevAria, ariaDescription()].filter(Boolean).join(', '),
   });
 }

From 06b1b0c8850669d005bc594908faaa6495c1d4b5 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 14:56:54 +0800
Subject: [PATCH 05/15] eslint modif

---
 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index 2a8e64c10881..f17f76457c37 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -12,7 +12,8 @@ import TimeCell from './TimeCell.js';
 const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek', 'month'];
 const ariaDescription = () => {
-  const disabledDates = holidays.map((date) => {
+  const disabledDates = holidays
+  .map((date) => {
     if (Utils.isWeekend(date)) {
       return null;
     }
@@ -22,7 +23,8 @@ const ariaDescription = () => {
       month: 'long',
       day: 'numeric',
     });
-  }).filter(dateText => dateText);
+  })
+  .filter(dateText => dateText);
   if (disabledDates?.length > 0) {
     return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
   }

From 88e385afa49bbd6a979a6c3490af5055a4d4b039 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 15:30:11 +0800
Subject: [PATCH 06/15] final

---
 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index f17f76457c37..b3561f4e93e3 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -24,7 +24,7 @@ const ariaDescription = () => {
       day: 'numeric',
     });
   })
-  .filter(dateText => dateText);
+  .filter((dateText) => dateText);
   if (disabledDates?.length > 0) {
     return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
   }

From 316363caff8ba1dff9947332bb1c9553c5583b0b Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 16:15:34 +0800
Subject: [PATCH 07/15] correct indentation

---
 .../Scheduler/CellTemplates/ReactJs/App.js    | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index b3561f4e93e3..581bd2f0dfa7 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -13,20 +13,22 @@ const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek', 'month'];
 const ariaDescription = () => {
   const disabledDates = holidays
-  .map((date) => {
-    if (Utils.isWeekend(date)) {
-      return null;
-    }
-    return new Date(date).toLocaleDateString('en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  })
-  .filter((dateText) => dateText);
+    .map((date) => {
+      if (Utils.isWeekend(date)) {
+        return null;
+      }
+      return new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    })
+    .filter((dateText) => dateText);
   if (disabledDates?.length > 0) {
-    return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
+    return disabledDates
+      .map((dateText) => `${dateText} is a disabled date`)
+      .join('. ');
   }
 };
 const notifyDisableDate = () => {

From 2d11e2e08c0d6c01613d8bdad1736c6c9f9ce14e Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Mon, 21 Oct 2024 16:42:10 +0800
Subject: [PATCH 08/15] final commit

---
 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index 581bd2f0dfa7..e8e750cdc825 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -26,9 +26,7 @@ const ariaDescription = () => {
     })
     .filter((dateText) => dateText);
   if (disabledDates?.length > 0) {
-    return disabledDates
-      .map((dateText) => `${dateText} is a disabled date`)
-      .join('. ');
+    return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
   }
 };
 const notifyDisableDate = () => {

From 247b8f912e1a096165482be00b3a0a60e84ade5a Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 12:11:32 +0800
Subject: [PATCH 09/15] Refactor code

---
 .../Angular/app/app.component.ts              | 23 +++++++---------
 .../Scheduler/CellTemplates/React/App.tsx     | 24 +++++++----------
 .../Scheduler/CellTemplates/ReactJs/App.js    | 25 ++++++++----------
 .../Demos/Scheduler/CellTemplates/Vue/App.vue | 26 ++++++++-----------
 .../Scheduler/CellTemplates/jQuery/index.js   | 23 +++++++---------
 5 files changed, 52 insertions(+), 69 deletions(-)

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 19e90bc3254c..9180727d22ff 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -45,22 +45,21 @@ export class AppComponent {
   currentView = this.views[0];
 
   ariaDescription = () => {
-    const disabledDates = this.holidays.map(date => {
-        if (this.isWeekend(date)) {
-          return null;
-        }
-        return new Date(date).toLocaleDateString('en-US', {
+    const disabledDates = this.holidays
+      .filter(date => !this.isWeekend(date))
+      .map(date => new Date(date).toLocaleDateString('en-US', {
           weekday: 'long',
           year: 'numeric',
           month: 'long',
           day: 'numeric',
         })
+      );
+      if (disabledDates?.length === 1) {
+        return `${disabledDates} is a disabled date`;
+      }
+      if (disabledDates?.length > 1) {
+        return `${disabledDates.join(', ')} are disabled dates`;
       }
-    ).filter(dateText => dateText);
-    
-    if (disabledDates?.length > 0) {
-      return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
-    }
   };
 
   constructor(public dataService: DataService) {
@@ -174,9 +173,7 @@ export class AppComponent {
 
   setComponentAria(element): void {
     const prevAria = element?.attr('aria-label') || '';
-    element?.attr({
-      'aria-label': [prevAria, this.ariaDescription()].filter(Boolean).join(', '),
-    });
+    element?.attr('aria-label', `${prevAria} ${this.ariaDescription()}`);
   }
 }
 
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
index 5aa45099e8d0..11939740dcde 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
@@ -14,23 +14,21 @@ import TimeCell from './TimeCell.tsx';
 const currentDate = new Date(2021, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['workWeek', 'month'];
 const ariaDescription = () => {
-  const disabledDates = holidays.map(date => 
-    {
-      if (Utils.isWeekend(date)) {
-        return null;
-      }
-      return new Date(date).toLocaleDateString('en-US', {
+  const disabledDates = holidays
+    .filter((date) => !Utils.isWeekend(date))
+    .map((date) => new Date(date).toLocaleDateString('en-US', {
         weekday: 'long',
         year: 'numeric',
         month: 'long',
         day: 'numeric',
       })
+    );
+    if (disabledDates?.length === 1) {
+      return `${disabledDates} is a disabled date`;
+    }
+    if (disabledDates?.length > 1) {
+      return `${disabledDates.join(', ')} are disabled dates`;
     }
-  ).filter(dateText => dateText);
-  
-  if (disabledDates?.length > 0) {
-    return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
-  }
 };
 
 const notifyDisableDate = () => {
@@ -78,9 +76,7 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
 
 const setComponentAria = (element) => {
   const prevAria = element?.attr('aria-label') || '';
-  element?.attr({
-    'aria-label': [prevAria, ariaDescription()].filter(Boolean).join(', '),
-  });
+  element?.attr('aria-label', `${prevAria} ${ariaDescription()}`);
 }
 
 const App = () => {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index e8e750cdc825..2bae12be3b57 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -13,21 +13,20 @@ const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek', 'month'];
 const ariaDescription = () => {
   const disabledDates = holidays
-    .map((date) => {
-      if (Utils.isWeekend(date)) {
-        return null;
-      }
-      return new Date(date).toLocaleDateString('en-US', {
+    .filter((date) => !Utils.isWeekend(date))
+    .map((date) => new Date(date).toLocaleDateString('en-US', {
         weekday: 'long',
         year: 'numeric',
         month: 'long',
         day: 'numeric',
-      });
-    })
-    .filter((dateText) => dateText);
-  if (disabledDates?.length > 0) {
-    return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
-  }
+      })
+    );
+    if (disabledDates?.length === 1) {
+      return `${disabledDates} is a disabled date`;
+    }
+    if (disabledDates?.length > 1) {
+      return `${disabledDates.join(', ')} are disabled dates`;
+    }
 };
 const notifyDisableDate = () => {
   notify(
@@ -71,9 +70,7 @@ const onAppointmentUpdating = (e) => {
 };
 const setComponentAria = (element) => {
   const prevAria = element?.attr('aria-label') || '';
-  element?.attr({
-    'aria-label': [prevAria, ariaDescription()].filter(Boolean).join(', '),
-  });
+  element?.attr('aria-label', `${prevAria} ${this.ariaDescription()}`);
 };
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
index 9474e625a7df..825e6c5a1945 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
@@ -62,22 +62,20 @@ const isMonthView = computed(() => currentView.value === 'month');
 
 const ariaDescription = computed(() => {
   const disabledDates = holidays
-    .map((date) => {
-      if (Utils.isWeekend(date)) {
-        return null;
-      }
-
-      return new Date(date).toLocaleDateString('en-US', {
+    .filter((date) => !Utils.isWeekend(date))
+    .map((date) => new Date(date).toLocaleDateString('en-US', {
         weekday: 'long',
         year: 'numeric',
         month: 'long',
         day: 'numeric',
-      });
-    }).filter((dateText) => dateText);
-
-  if (disabledDates?.length > 0) {
-    return disabledDates.map((dateText) => `${dateText} is a disabled date`).join('. ');
-  }
+      })
+    );
+    if (disabledDates?.length === 1) {
+      return `${disabledDates} is a disabled date`;
+    }
+    if (disabledDates?.length > 1) {
+      return `${disabledDates.join(', ')} are disabled dates`;
+    }
 });
 
 function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
@@ -119,8 +117,6 @@ function applyDisableDatesToDateEditors(form) {
 
 function setComponentAria(element) {
   const prevAria = element?.attr('aria-label') || '';
-  element?.attr({
-    'aria-label': [prevAria, ariaDescription.value].filter(Boolean).join(', '),
-  });
+  element?.attr('aria-label', `${prevAria} ${ariaDescription.value}`);
 }
 </script>
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
index 09184f8427d7..7122bc54b462 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
@@ -92,22 +92,21 @@ const holidays = [
   new Date(2021, 5, 6),
 ];
 const ariaDescription = () => {
-  const disabledDates = holidays.map(date => {
-      if (isWeekend(date)) {
-        return null;
-      }
-      return new Date(date).toLocaleDateString('en-US', {
+  const disabledDates = holidays
+    .filter(date => !isWeekend(date))  // Filter out weekends first
+    .map(date => new Date(date).toLocaleDateString('en-US', {
         weekday: 'long',
         year: 'numeric',
         month: 'long',
         day: 'numeric',
       })
+    );
+    if (disabledDates?.length === 1) {
+      return `${disabledDates} is a disabled date`;
+    }
+    if (disabledDates?.length > 1) {
+      return `${disabledDates.join(', ')} are disabled dates`;
     }
-  ).filter(dateText => dateText);
-  
-  if (disabledDates?.length > 0) {
-    return disabledDates.map(dateText => `${dateText} is a disabled date`).join('. ');
-  }
 };
 
 function notifyDisableDate() {
@@ -181,7 +180,5 @@ function applyDisableDatesToDateEditors(form) {
 
 function setComponentAria(element) {
   const prevAria = element?.attr('aria-label') || '';
-  element?.attr({
-    'aria-label': [prevAria, ariaDescription()].filter(Boolean).join(', '),
-  });
+  element?.attr('aria-label', `${prevAria} ${this.ariaDescription()}`);
 }

From 14ddbc7b6df6419f28c0212365905bafbe39378c Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 12:19:05 +0800
Subject: [PATCH 10/15] final

---
 .../Demos/Scheduler/CellTemplates/Angular/app/app.component.ts  | 2 +-
 apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 9180727d22ff..293c7336dce8 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -70,7 +70,7 @@ export class AppComponent {
 
   onContentReady = (e: DxSchedulerTypes.ContentReadyEvent) => {
     this.setComponentAria(e.component?.$element());
-  }
+  };
 
   onOptionChanged = (e: DxSchedulerTypes.OptionChangedEvent) => {
     if (e.name === 'currentView') {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
index 7122bc54b462..d6c84e4cdf5d 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
@@ -180,5 +180,5 @@ function applyDisableDatesToDateEditors(form) {
 
 function setComponentAria(element) {
   const prevAria = element?.attr('aria-label') || '';
-  element?.attr('aria-label', `${prevAria} ${this.ariaDescription()}`);
+  element?.attr('aria-label', `${prevAria} ${ariaDescription()}`);
 }

From bff9d12a35c89da534f3b9416210b8eaa7223010 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 12:57:55 +0800
Subject: [PATCH 11/15] indentation fix

---
 .../Scheduler/CellTemplates/ReactJs/App.js     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index 2bae12be3b57..b49f9732f265 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -14,20 +14,22 @@ const views = ['workWeek', 'month'];
 const ariaDescription = () => {
   const disabledDates = holidays
     .filter((date) => !Utils.isWeekend(date))
-    .map((date) => new Date(date).toLocaleDateString('en-US', {
+    .map((date) =>
+      new Date(date).toLocaleDateString('en-US', {
         weekday: 'long',
         year: 'numeric',
         month: 'long',
         day: 'numeric',
       })
     );
-    if (disabledDates?.length === 1) {
-      return `${disabledDates} is a disabled date`;
-    }
-    if (disabledDates?.length > 1) {
-      return `${disabledDates.join(', ')} are disabled dates`;
-    }
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
 };
+
 const notifyDisableDate = () => {
   notify(
     'Cannot create or move an appointment/event to disabled time/date regions.',
@@ -70,7 +72,7 @@ const onAppointmentUpdating = (e) => {
 };
 const setComponentAria = (element) => {
   const prevAria = element?.attr('aria-label') || '';
-  element?.attr('aria-label', `${prevAria} ${this.ariaDescription()}`);
+  element?.attr('aria-label', `${prevAria} ${ariaDescription()}`);
 };
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);

From 6d42cf52271b7ea4f6e4531ab47f62db8b2e5b53 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 13:41:51 +0800
Subject: [PATCH 12/15] changes

---
 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index b49f9732f265..8baed35a8998 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -20,8 +20,7 @@ const ariaDescription = () => {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
-      })
-    );
+      }));
   if (disabledDates?.length === 1) {
     return `${disabledDates} is a disabled date`;
   }

From cd93a5af3385997cc8670f50ec91015cdf441c41 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 14:09:31 +0800
Subject: [PATCH 13/15] check suggestion

---
 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
index 8baed35a8998..0d465da1f6b9 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -28,7 +28,6 @@ const ariaDescription = () => {
     return `${disabledDates.join(', ')} are disabled dates`;
   }
 };
-
 const notifyDisableDate = () => {
   notify(
     'Cannot create or move an appointment/event to disabled time/date regions.',

From 8ffb87bee1de3a36f24251b9dcc67e51a2729b9d Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 15:33:20 +0800
Subject: [PATCH 14/15] remove comment and fix indent

---
 .../Demos/Scheduler/CellTemplates/jQuery/index.js  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
index d6c84e4cdf5d..2814d8a92360 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
@@ -93,7 +93,7 @@ const holidays = [
 ];
 const ariaDescription = () => {
   const disabledDates = holidays
-    .filter(date => !isWeekend(date))  // Filter out weekends first
+    .filter(date => !isWeekend(date))
     .map(date => new Date(date).toLocaleDateString('en-US', {
         weekday: 'long',
         year: 'numeric',
@@ -101,12 +101,12 @@ const ariaDescription = () => {
         day: 'numeric',
       })
     );
-    if (disabledDates?.length === 1) {
-      return `${disabledDates} is a disabled date`;
-    }
-    if (disabledDates?.length > 1) {
-      return `${disabledDates.join(', ')} are disabled dates`;
-    }
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
 };
 
 function notifyDisableDate() {

From 098e33b89254bfb83282b787e4f651ca795ad144 Mon Sep 17 00:00:00 2001
From: tongsonbarbs <tongsonbarbs@gmail.com>
Date: Tue, 22 Oct 2024 15:50:52 +0800
Subject: [PATCH 15/15] fix indentation

---
 .../CellTemplates/Angular/app/app.component.ts       | 12 ++++++------
 .../Demos/Scheduler/CellTemplates/React/App.tsx      | 12 ++++++------
 apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue | 12 ++++++------
 3 files changed, 18 insertions(+), 18 deletions(-)

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 293c7336dce8..d31dae2a10e7 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -54,12 +54,12 @@ export class AppComponent {
           day: 'numeric',
         })
       );
-      if (disabledDates?.length === 1) {
-        return `${disabledDates} is a disabled date`;
-      }
-      if (disabledDates?.length > 1) {
-        return `${disabledDates.join(', ')} are disabled dates`;
-      }
+    if (disabledDates?.length === 1) {
+      return `${disabledDates} is a disabled date`;
+    }
+    if (disabledDates?.length > 1) {
+      return `${disabledDates.join(', ')} are disabled dates`;
+    }
   };
 
   constructor(public dataService: DataService) {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
index 11939740dcde..5a932c9390f4 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
@@ -23,12 +23,12 @@ const ariaDescription = () => {
         day: 'numeric',
       })
     );
-    if (disabledDates?.length === 1) {
-      return `${disabledDates} is a disabled date`;
-    }
-    if (disabledDates?.length > 1) {
-      return `${disabledDates.join(', ')} are disabled dates`;
-    }
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
 };
 
 const notifyDisableDate = () => {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
index 825e6c5a1945..86f4d2c2a832 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
@@ -70,12 +70,12 @@ const ariaDescription = computed(() => {
         day: 'numeric',
       })
     );
-    if (disabledDates?.length === 1) {
-      return `${disabledDates} is a disabled date`;
-    }
-    if (disabledDates?.length > 1) {
-      return `${disabledDates.join(', ')} are disabled dates`;
-    }
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
 });
 
 function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {