diff --git a/JSDemos/Demos/Scheduler/CustomTemplates/React/Appointment.tsx b/JSDemos/Demos/Scheduler/CustomTemplates/React/Appointment.tsx
index ba7abeb4d30..22eef7ddee9 100644
--- a/JSDemos/Demos/Scheduler/CustomTemplates/React/Appointment.tsx
+++ b/JSDemos/Demos/Scheduler/CustomTemplates/React/Appointment.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import Query from 'devextreme/data/query';
-import localization from 'devextreme/localization';
+import { formatDate } from 'devextreme/localization';
 import { SchedulerTypes } from 'devextreme-react/scheduler';
 import { moviesData } from './data.ts';
 
@@ -23,9 +23,9 @@ const Appointment = (props: AppointmentProps) => {
         Ticket Price: <strong>${ targetedAppointmentData.price }</strong>
       </div>
       <div>
-        {localization.formatDate(targetedAppointmentData.displayStartDate, 'shortTime')}
+        {formatDate(targetedAppointmentData.displayStartDate, 'shortTime')}
         {' - '}
-        {localization.formatDate(targetedAppointmentData.displayEndDate, 'shortTime')}
+        {formatDate(targetedAppointmentData.displayEndDate, 'shortTime')}
       </div>
     </div>
   );
diff --git a/JSDemos/Demos/Scheduler/CustomTemplates/ReactJs/Appointment.js b/JSDemos/Demos/Scheduler/CustomTemplates/ReactJs/Appointment.js
index ca0eb4239f7..02ac8f017ee 100644
--- a/JSDemos/Demos/Scheduler/CustomTemplates/ReactJs/Appointment.js
+++ b/JSDemos/Demos/Scheduler/CustomTemplates/ReactJs/Appointment.js
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import Query from 'devextreme/data/query';
-import localization from 'devextreme/localization';
+import { formatDate } from 'devextreme/localization';
 import { moviesData } from './data.js';
 
 const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];
@@ -15,9 +15,9 @@ const Appointment = (props) => {
         Ticket Price: <strong>${targetedAppointmentData.price}</strong>
       </div>
       <div>
-        {localization.formatDate(targetedAppointmentData.displayStartDate, 'shortTime')}
+        {formatDate(targetedAppointmentData.displayStartDate, 'shortTime')}
         {' - '}
-        {localization.formatDate(targetedAppointmentData.displayEndDate, 'shortTime')}
+        {formatDate(targetedAppointmentData.displayEndDate, 'shortTime')}
       </div>
     </div>
   );