diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html
index 93cbf6453a15..efa3ce860356 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html
@@ -19,17 +19,20 @@
     icon="conferenceroomoutline"
   ></dxi-scheduler-resource>
 </dx-scheduler>
+
 <dx-context-menu
   [items]="contextMenuItems"
-  [disabled]="disabled"
-  [target]="target"
+  target=".dx-scheduler"
   (onItemClick)="onContextMenuItemClick($event)"
+  (onHiding)="onContextMenuHiding()"
   [width]="200"
 >
   <div *dxTemplate="let e of 'item'">
-    @if(e.color) {
-    <div class="item-badge" [ngStyle]="{ backgroundColor: e.color }"></div>
-    }
-    <div class="item-text">{{ e.text }}</div>
+    <div>
+      @if(e.color) {
+      <div class="item-badge" [style.background-color]="e.color"></div>
+      }
+      {{ e.text }}
+    </div>
   </div>
 </dx-context-menu>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.ts
index e9fd6bb38d71..dbb0f9ffb696 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.ts
@@ -13,9 +13,6 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
-
 let modulePrefix = '';
 // @ts-ignore
 if (window && window.config?.packageConfigPaths) {
@@ -42,60 +39,80 @@ export class AppComponent {
 
   resourcesData: Resource[];
 
-  groups: string[];
+  groups: string[] = [];
 
   crossScrollingEnabled = false;
 
-  contextMenuItems = [];
-
-  disabled = true;
-
-  target: string = appointmentClassName;
+  contextMenuItems: ContextMenuItem[] = [];
 
   constructor(service: Service) {
     this.resourcesData = service.getResources();
     this.appointmentsData = service.getAppointments();
   }
 
-  onAppointmentContextMenu({ appointmentData, targetedAppointmentData }: DxSchedulerTypes.AppointmentContextMenuEvent) {
+  onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
+    e.itemData.onItemClick(e);
+  }
+
+  onAppointmentContextMenu(e: DxSchedulerTypes.AppointmentContextMenuEvent) {
+    const items = this.getAppointmentContextMenuItems(e);
+    this.contextMenuItems = items;
+  }
+
+  onCellContextMenu(e: DxSchedulerTypes.CellContextMenuEvent) {
+    const items = this.getCellContextMenuItems(e);
+    this.contextMenuItems = items;
+  }
+
+  onContextMenuHiding() {
+    this.contextMenuItems = [];
+  }
+
+  getAppointmentContextMenuItems(e: DxSchedulerTypes.AppointmentContextMenuEvent): ContextMenuItem[] {
+    const {
+      appointmentData: appointment,
+      targetedAppointmentData: targetedAppointment,
+    } = e;
     const scheduler = this.scheduler.instance;
-    const resourceItems = this.resourcesData
-      .map((item) => ({
-        ...item,
-        onItemClick: ({ itemData }: DxContextMenuTypes.ItemClickEvent<Resource>) => scheduler.updateAppointment(appointmentData, {
-          ...appointmentData,
-          ...{ roomId: [itemData.id] },
-        }),
-      }));
-    this.target = appointmentClassName;
-    this.disabled = false;
-    this.contextMenuItems = [
+
+    return [
       {
         text: 'Open',
-        onItemClick: () => scheduler.showAppointmentPopup(appointmentData),
+        onItemClick: () => scheduler.showAppointmentPopup(appointment),
       },
       {
         text: 'Delete',
-        onItemClick: () => scheduler.deleteAppointment(appointmentData),
+        onItemClick: () => scheduler.deleteAppointment(appointment),
       },
       {
         text: 'Repeat Weekly',
         beginGroup: true,
-        onItemClick: () => scheduler.updateAppointment(appointmentData, {
-          startDate: targetedAppointmentData.startDate,
+        onItemClick: () => scheduler.updateAppointment(appointment, {
+          ...appointment,
+          startDate: targetedAppointment.startDate,
           recurrenceRule: 'FREQ=WEEKLY',
         }),
       },
-      { text: 'Set Room', beginGroup: true, disabled: true },
-      ...resourceItems,
+      {
+        text: 'Set Room',
+        beginGroup: true,
+        disabled: true,
+      },
+      ...this.resourcesData.map((item) => ({
+        ...item,
+        onItemClick: ({ itemData }: DxContextMenuTypes.ItemClickEvent<Resource>) => scheduler.updateAppointment(appointment, {
+          ...appointment,
+          roomId: [itemData.id],
+        }),
+      })),
     ];
   }
 
-  onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent) {
+  getCellContextMenuItems(e: DxSchedulerTypes.CellContextMenuEvent): ContextMenuItem[] {
+    const { cellData } = e;
     const scheduler = this.scheduler.instance;
-    this.target = cellClassName;
-    this.disabled = false;
-    this.contextMenuItems = [
+
+    return [
       {
         text: 'New Appointment',
         onItemClick: () => scheduler.showAppointmentPopup(
@@ -117,9 +134,9 @@ export class AppComponent {
         text: 'Group by Room/Ungroup',
         beginGroup: true,
         onItemClick: () => {
-          if (this.groups) {
+          if (this.groups.length) {
             this.crossScrollingEnabled = false;
-            this.groups = null;
+            this.groups = [];
           } else {
             this.crossScrollingEnabled = true;
             this.groups = ['roomId'];
@@ -134,10 +151,6 @@ export class AppComponent {
       },
     ];
   }
-
-  onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
-    e.itemData.onItemClick(e);
-  }
 }
 
 bootstrapApplication(AppComponent, {
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts
index 58ab97226925..c65695a0db3d 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts
@@ -16,7 +16,7 @@ export interface Resource {
   color: string;
 }
 
-export type ContextMenuItem = DxContextMenuTypes.Item & Resource & {
+export type ContextMenuItem = DxContextMenuTypes.Item & Partial<Resource> & {
   onItemClick?: (e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) => void
 };
 
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
index eaa9085a94db..da48c214a4e8 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
@@ -1,19 +1,16 @@
 import React, { useCallback, useRef, useState } from 'react';
 
 import { Scheduler, Resource } from 'devextreme-react/scheduler';
-import type { SchedulerTypes, SchedulerRef } from 'devextreme-react/scheduler';
+import type { SchedulerRef, SchedulerTypes } from 'devextreme-react/scheduler';
 import { ContextMenu } from 'devextreme-react/context-menu';
 import type { ContextMenuTypes } from 'devextreme-react/context-menu';
 
-import AppointmentMenuTemplate from './AppointmentTemplate.tsx';
+import ItemTemplate from './itemTemplate.tsx';
 import { data, resourcesData } from './data.ts';
 import type { ContextMenuItem } from './types';
 
 const views: SchedulerTypes.ViewType[] = ['day', 'month'];
 
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
-
 const onContextMenuItemClick = (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
   e.itemData?.onItemClick?.(e);
 };
@@ -22,39 +19,28 @@ const App = () => {
   const schedulerRef = useRef<SchedulerRef>(null);
   const [currentDate, setCurrentDate] = useState(new Date(2020, 10, 25));
   const [contextMenuItems, setContextMenuItems] = useState<ContextMenuItem[]>([]);
-  const [target, setTarget] = useState(appointmentClassName);
-  const [disabled, setDisabled] = useState(true);
-  const [groups, setGroups] = useState<string[] | undefined>(undefined);
+  const [groups, setGroups] = useState<string[]>([]);
   const [crossScrollingEnabled, setCrossScrollingEnabled] = useState(false);
 
-  const onAppointmentContextMenu = useCallback((event: SchedulerTypes.AppointmentContextMenuEvent) => {
-    const { appointmentData, targetedAppointmentData } = event;
-    const scheduler = schedulerRef.current?.instance();
-
-    const resourceItems: ContextMenuItem[] = resourcesData.map((item) => ({
-      ...item,
-      onItemClick: (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => scheduler?.updateAppointment(appointmentData, {
-        ...appointmentData,
-        ...{ roomId: [e.itemData?.id] },
-      }),
-    }));
+  const getAppointmentContextMenuItems = useCallback((e: SchedulerTypes.AppointmentContextMenuEvent) => {
+    const { appointmentData: appointment, targetedAppointmentData: targetedAppointment } = e;
+    const scheduler = e.component;
 
-    setTarget(appointmentClassName);
-    setDisabled(false);
-    setContextMenuItems([
+    return [
       {
         text: 'Open',
-        onItemClick: () => scheduler?.showAppointmentPopup(appointmentData),
+        onItemClick: () => scheduler?.showAppointmentPopup(appointment),
       },
       {
         text: 'Delete',
-        onItemClick: () => scheduler?.deleteAppointment(appointmentData),
+        onItemClick: () => scheduler?.deleteAppointment(appointment),
       },
       {
         text: 'Repeat Weekly',
         beginGroup: true,
-        onItemClick: () => scheduler?.updateAppointment(appointmentData, {
-          startDate: targetedAppointmentData?.startDate,
+        onItemClick: () => scheduler?.updateAppointment(appointment, {
+          ...appointment,
+          startDate: targetedAppointment?.startDate,
           recurrenceRule: 'FREQ=WEEKLY',
         }),
       },
@@ -63,40 +49,50 @@ const App = () => {
         beginGroup: true,
         disabled: true,
       },
-      ...resourceItems,
-    ]);
+      ...resourcesData.map((item) => ({
+        ...item,
+        onItemClick: (clickEvent: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
+          scheduler?.updateAppointment(appointment, {
+            ...appointment,
+            roomId: [clickEvent.itemData?.id],
+          });
+        },
+      })),
+    ];
   }, []);
 
-  const onCellContextMenu = useCallback((e: SchedulerTypes.CellContextMenuEvent) => {
-    const scheduler = schedulerRef.current?.instance();
+  const getCellContextMenuItems = useCallback((e: SchedulerTypes.CellContextMenuEvent) => {
+    const scheduler = e.component;
 
-    setTarget(cellClassName);
-    setDisabled(false);
-    setContextMenuItems([
+    return [
       {
         text: 'New Appointment',
-        onItemClick: () => scheduler?.showAppointmentPopup(
-          { startDate: e.cellData.startDateUTC },
-          true,
-        ),
+        onItemClick: () => {
+          scheduler?.showAppointmentPopup(
+            { startDate: e.cellData.startDateUTC },
+            true,
+          );
+        },
       },
       {
         text: 'New Recurring Appointment',
-        onItemClick: () => scheduler?.showAppointmentPopup(
-          {
-            startDate: e.cellData.startDateUTC,
-            recurrenceRule: 'FREQ=DAILY',
-          },
-          true,
-        ),
+        onItemClick: () => {
+          scheduler?.showAppointmentPopup(
+            {
+              startDate: e.cellData.startDateUTC,
+              recurrenceRule: 'FREQ=DAILY',
+            },
+            true,
+          );
+        },
       },
       {
         text: 'Group by Room/Ungroup',
         beginGroup: true,
         onItemClick: () => {
-          if (groups) {
+          if (groups.length) {
             setCrossScrollingEnabled(false);
-            setGroups(undefined);
+            setGroups([]);
           } else {
             setCrossScrollingEnabled(true);
             setGroups(['roomId']);
@@ -109,9 +105,23 @@ const App = () => {
           setCurrentDate(new Date());
         },
       },
-    ]);
+    ];
   }, [groups]);
 
+  const onAppointmentContextMenu = useCallback((e: SchedulerTypes.AppointmentContextMenuEvent) => {
+    const items = getAppointmentContextMenuItems(e);
+    setContextMenuItems(items);
+  }, [getAppointmentContextMenuItems]);
+
+  const onCellContextMenu = useCallback((e: SchedulerTypes.CellContextMenuEvent) => {
+    const items = getCellContextMenuItems(e);
+    setContextMenuItems(items);
+  }, [getCellContextMenuItems]);
+
+  const onContextMenuHiding = useCallback(() => {
+    setContextMenuItems([]);
+  }, []);
+
   return (
     <>
       <Scheduler
@@ -139,10 +149,10 @@ const App = () => {
       <ContextMenu
         dataSource={contextMenuItems}
         width={200}
-        target={target}
-        disabled={disabled}
+        target='.dx-scheduler'
         onItemClick={onContextMenuItemClick}
-        itemComponent={AppointmentMenuTemplate}
+        onHiding={onContextMenuHiding}
+        itemComponent={ItemTemplate}
       />
     </>
   );
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/index.html b/apps/demos/Demos/Scheduler/ContextMenu/React/index.html
index cfb9b3aa6769..ee451f8288ff 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/index.html
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/index.html
@@ -6,6 +6,7 @@
     <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="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/AppointmentTemplate.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
similarity index 59%
rename from apps/demos/Demos/Scheduler/ContextMenu/React/AppointmentTemplate.tsx
rename to apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
index f4278dc0da98..ce704b4a2f01 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/AppointmentTemplate.tsx
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
-type AppointmentMenuTemplateProps = {
+type ItemTemplateProps = {
   data: {
     color: string;
     text: string;
   }
 };
 
-const AppointmentMenuTemplate = (props: AppointmentMenuTemplateProps) => (
+const ItemTemplate = (props: ItemTemplateProps) => (
   <div>
     {props.data.color && <div className="item-badge" style={{ backgroundColor: props.data.color }} />}
     {props.data.text}
   </div>
 );
 
-export default AppointmentMenuTemplate;
+export default ItemTemplate;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
index 7d52d89364e2..41fb881541dd 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
@@ -1,13 +1,3 @@
-.dx-menu-item-content span {
-  margin-right: 5px;
-}
-
-.dx-menu-item-has-submenu .dx-icon-spinright {
-  position: absolute;
-  top: 7px;
-  right: 2px;
-}
-
 .item-badge {
   text-align: center;
   float: left;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts
index 854fba22f8c6..f526dc20a468 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts
@@ -9,4 +9,4 @@ export type Resource = {
   color?: string;
 };
 
-export type ContextMenuItem = ContextMenuTypes.Item & Resource & { onItemClick?: (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => void };
+export type ContextMenuItem = ContextMenuTypes.Item & Partial<Resource> & { onItemClick?: (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => void };
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js
index 2052f22053ec..3603761cf4ce 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js
@@ -1,12 +1,10 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Scheduler, Resource } from 'devextreme-react/scheduler';
 import { ContextMenu } from 'devextreme-react/context-menu';
-import AppointmentMenuTemplate from './AppointmentTemplate.js';
+import ItemTemplate from './itemTemplate.js';
 import { data, resourcesData } from './data.js';
 
 const views = ['day', 'month'];
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
 const onContextMenuItemClick = (e) => {
   e.itemData?.onItemClick?.(e);
 };
@@ -14,38 +12,27 @@ const App = () => {
   const schedulerRef = useRef(null);
   const [currentDate, setCurrentDate] = useState(new Date(2020, 10, 25));
   const [contextMenuItems, setContextMenuItems] = useState([]);
-  const [target, setTarget] = useState(appointmentClassName);
-  const [disabled, setDisabled] = useState(true);
-  const [groups, setGroups] = useState(undefined);
+  const [groups, setGroups] = useState([]);
   const [crossScrollingEnabled, setCrossScrollingEnabled] = useState(false);
-  const onAppointmentContextMenu = useCallback((event) => {
-    const { appointmentData, targetedAppointmentData } = event;
-    const scheduler = schedulerRef.current?.instance();
-    const resourceItems = resourcesData.map((item) => ({
-      ...item,
-      onItemClick: (e) =>
-        scheduler?.updateAppointment(appointmentData, {
-          ...appointmentData,
-          ...{ roomId: [e.itemData?.id] },
-        }),
-    }));
-    setTarget(appointmentClassName);
-    setDisabled(false);
-    setContextMenuItems([
+  const getAppointmentContextMenuItems = useCallback((e) => {
+    const { appointmentData: appointment, targetedAppointmentData: targetedAppointment } = e;
+    const scheduler = e.component;
+    return [
       {
         text: 'Open',
-        onItemClick: () => scheduler?.showAppointmentPopup(appointmentData),
+        onItemClick: () => scheduler?.showAppointmentPopup(appointment),
       },
       {
         text: 'Delete',
-        onItemClick: () => scheduler?.deleteAppointment(appointmentData),
+        onItemClick: () => scheduler?.deleteAppointment(appointment),
       },
       {
         text: 'Repeat Weekly',
         beginGroup: true,
         onItemClick: () =>
-          scheduler?.updateAppointment(appointmentData, {
-            startDate: targetedAppointmentData?.startDate,
+          scheduler?.updateAppointment(appointment, {
+            ...appointment,
+            startDate: targetedAppointment?.startDate,
             recurrenceRule: 'FREQ=WEEKLY',
           }),
       },
@@ -54,38 +41,46 @@ const App = () => {
         beginGroup: true,
         disabled: true,
       },
-      ...resourceItems,
-    ]);
+      ...resourcesData.map((item) => ({
+        ...item,
+        onItemClick: (clickEvent) => {
+          scheduler?.updateAppointment(appointment, {
+            ...appointment,
+            roomId: [clickEvent.itemData?.id],
+          });
+        },
+      })),
+    ];
   }, []);
-  const onCellContextMenu = useCallback(
+  const getCellContextMenuItems = useCallback(
     (e) => {
-      const scheduler = schedulerRef.current?.instance();
-      setTarget(cellClassName);
-      setDisabled(false);
-      setContextMenuItems([
+      const scheduler = e.component;
+      return [
         {
           text: 'New Appointment',
-          onItemClick: () =>
-            scheduler?.showAppointmentPopup({ startDate: e.cellData.startDateUTC }, true),
+          onItemClick: () => {
+            scheduler?.showAppointmentPopup({ startDate: e.cellData.startDateUTC }, true);
+          },
         },
         {
           text: 'New Recurring Appointment',
-          onItemClick: () =>
+          onItemClick: () => {
             scheduler?.showAppointmentPopup(
               {
                 startDate: e.cellData.startDateUTC,
                 recurrenceRule: 'FREQ=DAILY',
               },
               true,
-            ),
+            );
+          },
         },
         {
           text: 'Group by Room/Ungroup',
           beginGroup: true,
           onItemClick: () => {
-            if (groups) {
+            if (groups.length) {
               setCrossScrollingEnabled(false);
-              setGroups(undefined);
+              setGroups([]);
             } else {
               setCrossScrollingEnabled(true);
               setGroups(['roomId']);
@@ -98,10 +93,27 @@ const App = () => {
             setCurrentDate(new Date());
           },
         },
-      ]);
+      ];
     },
     [groups],
   );
+  const onAppointmentContextMenu = useCallback(
+    (e) => {
+      const items = getAppointmentContextMenuItems(e);
+      setContextMenuItems(items);
+    },
+    [getAppointmentContextMenuItems],
+  );
+  const onCellContextMenu = useCallback(
+    (e) => {
+      const items = getCellContextMenuItems(e);
+      setContextMenuItems(items);
+    },
+    [getCellContextMenuItems],
+  );
+  const onContextMenuHiding = useCallback(() => {
+    setContextMenuItems([]);
+  }, []);
   return (
     <>
       <Scheduler
@@ -129,10 +141,10 @@ const App = () => {
       <ContextMenu
         dataSource={contextMenuItems}
         width={200}
-        target={target}
-        disabled={disabled}
+        target=".dx-scheduler"
         onItemClick={onContextMenuItemClick}
-        itemComponent={AppointmentMenuTemplate}
+        onHiding={onContextMenuHiding}
+        itemComponent={ItemTemplate}
       />
     </>
   );
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html
index d6d83f735a76..db31b0fd60c6 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html
@@ -19,6 +19,11 @@
       type="text/css"
       href="../../../../node_modules/devextreme-dist/css/dx.light.css"
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="styles.css"
+    />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js
similarity index 71%
rename from apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js
rename to apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js
index ff6707af3299..31eaeb9417d8 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const AppointmentMenuTemplate = (props) => (
+const ItemTemplate = (props) => (
   <div>
     {props.data.color && (
       <div
@@ -11,4 +11,4 @@ const AppointmentMenuTemplate = (props) => (
     {props.data.text}
   </div>
 );
-export default AppointmentMenuTemplate;
+export default ItemTemplate;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
index 7d52d89364e2..41fb881541dd 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
@@ -1,13 +1,3 @@
-.dx-menu-item-content span {
-  margin-right: 5px;
-}
-
-.dx-menu-item-has-submenu .dx-icon-spinright {
-  position: absolute;
-  top: 7px;
-  right: 2px;
-}
-
 .item-badge {
   text-align: center;
   float: left;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue b/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
index ed78632e61ec..144de8b2a47e 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <DxScheduler
-      ref="schedulerRef"
       time-zone="America/Los_Angeles"
       :groups="groups"
       :data-source="dataSource"
@@ -22,12 +21,13 @@
         icon="conferenceroomoutline"
       />
     </DxScheduler>
+
     <DxContextMenu
-      :items="contextMenuItems"
+      :data-source="contextMenuItems"
       :width="200"
-      :disabled="disabled"
-      :target="target"
+      target=".dx-scheduler"
       :on-item-click="onContextMenuItemClick"
+      :on-hiding="onContextMenuHiding"
       item-template="itemTemplateSlot"
     >
       <template #itemTemplateSlot="{ data: itemData }">
@@ -46,85 +46,106 @@ import { resourcesData, data } from './data.ts';
 import type { ContextMenuItem } from './types';
 
 const views = ['day', 'month'];
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
 const currentDate = ref(new Date(2020, 10, 25));
 const dataSource = data;
-const groups = ref<string[]>();
+const groups = ref<string[]>([]);
 const crossScrollingEnabled = ref(false);
-const disabled = ref(true);
 const contextMenuItems = ref<ContextMenuItem[]>([]);
-const target = ref<string>(appointmentClassName);
-const schedulerRef = ref<DxScheduler>();
 
-function onAppointmentContextMenu(
-  { appointmentData, targetedAppointmentData }: DxSchedulerTypes.AppointmentContextMenuEvent,
-) {
-  const scheduler = schedulerRef.value!.instance!;
-  const resourceItems = resourcesData.map((item) => ({
-    ...item,
-    onItemClick: (
-      { itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>,
-    ) => scheduler?.updateAppointment(appointmentData, {
-      ...appointmentData,
-      ...{ roomId: [itemData?.id] },
-    }),
-  }));
-  target.value = appointmentClassName;
-  disabled.value = false;
-  contextMenuItems.value = [
+const onAppointmentContextMenu = (e: DxSchedulerTypes.AppointmentContextMenuEvent) => {
+  const items = getAppointmentContextMenuItems(e);
+  contextMenuItems.value = items;
+};
+
+const onCellContextMenu = (e: DxSchedulerTypes.CellContextMenuEvent) => {
+  const items = getCellContextMenuItems(e);
+  contextMenuItems.value = items;
+};
+
+const onContextMenuItemClick = (e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
+  e.itemData?.onItemClick?.(e);
+};
+
+const onContextMenuHiding = () => {
+  contextMenuItems.value = [];
+};
+
+const getAppointmentContextMenuItems = (
+  e: DxSchedulerTypes.AppointmentContextMenuEvent,
+): ContextMenuItem[] => {
+  const scheduler = e.component;
+  const { appointmentData: appointment, targetedAppointmentData: targetedAppointment } = e;
+
+  return [
     {
       text: 'Open',
-      onItemClick: () => scheduler.showAppointmentPopup(appointmentData),
+      onItemClick: () => { scheduler.showAppointmentPopup(appointment); },
     },
     {
       text: 'Delete',
-      onItemClick: () => scheduler.deleteAppointment(appointmentData),
+      onItemClick: () => { scheduler.deleteAppointment(appointment); },
     },
     {
       text: 'Repeat Weekly',
       beginGroup: true,
-      onItemClick: () => scheduler.updateAppointment(appointmentData, {
-        startDate: targetedAppointmentData?.startDate,
-        recurrenceRule: 'FREQ=WEEKLY',
-      }),
+      onItemClick: () => {
+        scheduler.updateAppointment(appointment, {
+          ...appointment,
+          startDate: targetedAppointment?.startDate,
+          recurrenceRule: 'FREQ=WEEKLY',
+        });
+      },
+    },
+    {
+      text: 'Set Room',
+      beginGroup: true,
+      disabled: true,
     },
-    { text: 'Set Room', beginGroup: true, disabled: true },
-    ...resourceItems,
+    ...resourcesData.map((item) => ({
+      ...item,
+      onItemClick: (clickEvent: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
+        scheduler.updateAppointment(appointment, {
+          ...appointment,
+          roomId: [clickEvent.itemData?.id],
+        });
+      },
+    })),
   ];
-}
-function onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent) {
-  const scheduler = schedulerRef.value!.instance!;
-  target.value = cellClassName;
-  disabled.value = false;
-  contextMenuItems.value = [
+};
+
+const getCellContextMenuItems = (
+  e: DxSchedulerTypes.CellContextMenuEvent,
+): ContextMenuItem[] => {
+  const scheduler = e.component;
+
+  return [
     {
       text: 'New Appointment',
-      onItemClick: () => scheduler.showAppointmentPopup(
-        { startDate: cellData.startDateUTC },
-        true,
-      ),
+      onItemClick: () => {
+        scheduler.showAppointmentPopup({
+          startDate: e.cellData.startDateUTC,
+        }, true);
+      },
     },
     {
       text: 'New Recurring Appointment',
-      onItemClick: () => scheduler.showAppointmentPopup(
-        {
-          startDate: cellData.startDateUTC,
+      onItemClick: () => {
+        scheduler.showAppointmentPopup({
+          startDate: e.cellData.startDateUTC,
           recurrenceRule: 'FREQ=DAILY',
-        },
-        true,
-      ),
+        }, true);
+      },
     },
     {
       text: 'Group by Room/Ungroup',
       beginGroup: true,
       onItemClick: () => {
-        if (groups.value) {
+        if (groups.value.length) {
+          groups.value = [];
           crossScrollingEnabled.value = false;
-          groups.value = undefined;
         } else {
-          crossScrollingEnabled.value = true;
           groups.value = ['roomId'];
+          crossScrollingEnabled.value = true;
         }
       },
     },
@@ -135,20 +156,6 @@ function onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent)
       },
     },
   ];
-}
-function onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
-  e.itemData?.onItemClick?.(e);
-}
-</script>
-
-<style scoped>
-.dx-menu-item-content span {
-  margin-right: 5px;
-}
+};
 
-.dx-menu-item-has-submenu .dx-icon-spinright {
-  position: absolute;
-  top: 7px;
-  right: 2px;
-}
-</style>
+</script>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue b/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue
index c7ab935c8e3d..73d53e97738f 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue
@@ -1,11 +1,13 @@
 <template>
   <div>
-    <div
-      v-if="itemData.color"
-      :style="styleObject"
-      class="item-badge"
-    />
-    {{ itemData.text }}
+    <div>
+      <div
+        v-if="itemData.color"
+        :style="styleObject"
+        class="item-badge"
+      />
+      {{ itemData.text }}
+    </div>
   </div>
 </template>
 
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.html b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.html
index 1a7ce213cb28..0aedfa1614b6 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.html
+++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
 
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
     <script src="data.js"></script>
@@ -14,8 +15,8 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div id="context-menu"></div>
       <div id="scheduler"></div>
+      <div id="context-menu"></div>
     </div>
   </body>
 </html>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.js b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.js
index 0894b9a450ca..4bff6cdb7bc3 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.js
@@ -1,7 +1,4 @@
 $(() => {
-  const appointmentClassName = '.dx-scheduler-appointment';
-  const cellClassName = '.dx-scheduler-date-table-cell';
-
   $('#scheduler').dxScheduler({
     timeZone: 'America/Los_Angeles',
     dataSource: data,
@@ -10,17 +7,14 @@ $(() => {
     currentDate: new Date(2020, 10, 25),
     startDayHour: 9,
     recurrenceEditMode: 'series',
+    groups: [],
     onAppointmentContextMenu(e) {
-      updateContextMenu(
-        false,
-        appointmentContextMenuItems,
-        appointmentClassName,
-        itemTemplate,
-        onItemClick(e),
-      );
+      const items = getAppointmentContextMenuItems(e);
+      contextMenuInstance.option('dataSource', items);
     },
     onCellContextMenu(e) {
-      updateContextMenu(false, cellContextMenuItems, cellClassName, 'item', onItemClick(e));
+      const items = getCellContextMenuItems(e);
+      contextMenuInstance.option('dataSource', items);
     },
     resources: [{
       fieldExpr: 'roomId',
@@ -34,103 +28,17 @@ $(() => {
   const contextMenuInstance = $('#context-menu').dxContextMenu({
     width: 200,
     dataSource: [],
-    disabled: true,
-    target: appointmentClassName,
+    target: '#scheduler',
+    itemTemplate: contextMenuItemTemplate,
+    onItemClick: (e) => {
+      e.itemData.onItemClick(e);
+    },
+    onHiding: (e) => {
+      e.component.option('dataSource', []);
+    },
   }).dxContextMenu('instance');
 
-  const updateContextMenu = function (disable, dataSource, target, itemTemplate, onItemClick) {
-    contextMenuInstance.option({
-      dataSource,
-      target,
-      itemTemplate,
-      onItemClick,
-      disabled: disable,
-    });
-  };
-
-  const itemTemplate = function (itemData) {
-    return getAppointmentMenuTemplate(itemData);
-  };
-
-  const onItemClick = function (contextMenuEvent) {
-    return (e) => {
-      e.itemData.onItemClick(contextMenuEvent, e);
-    };
-  };
-
-  const createAppointment = function (e) {
-    e.component.showAppointmentPopup({
-      startDate: e.cellData.startDateUTC,
-    }, true);
-  };
-
-  const createRecurringAppointment = function (e) {
-    e.component.showAppointmentPopup({
-      startDate: e.cellData.startDateUTC,
-      recurrenceRule: 'FREQ=DAILY',
-    }, true);
-  };
-
-  const groupCell = function (e) {
-    const scheduler = e.component;
-
-    if (scheduler.option('groups')) {
-      scheduler.option({ crossScrollingEnabled: false, groups: undefined });
-    } else {
-      scheduler.option({ crossScrollingEnabled: true, groups: ['roomId'] });
-    }
-  };
-
-  const showCurrentDate = function (e) {
-    e.component.option('currentDate', new Date());
-  };
-
-  const showAppointment = function (e) {
-    e.component.showAppointmentPopup(e.appointmentData);
-  };
-
-  const deleteAppointment = function (e) {
-    e.component.deleteAppointment(e.appointmentData);
-  };
-
-  const repeatAppointmentWeekly = function (e) {
-    const itemData = e.appointmentData;
-
-    e.component.updateAppointment(itemData, $.extend(itemData, {
-      startDate: e.targetedAppointmentData.startDate,
-      recurrenceRule: 'FREQ=WEEKLY',
-    }));
-  };
-
-  const setResource = function (e, clickEvent) {
-    const itemData = e.appointmentData;
-
-    e.component.updateAppointment(itemData, $.extend(itemData, {
-      roomId: [clickEvent.itemData.id],
-    }));
-  };
-
-  const cellContextMenuItems = [
-    { text: 'New Appointment', onItemClick: createAppointment },
-    { text: 'New Recurring Appointment', onItemClick: createRecurringAppointment },
-    { text: 'Group by Room/Ungroup', beginGroup: true, onItemClick: groupCell },
-    { text: 'Go to Today', onItemClick: showCurrentDate },
-  ];
-
-  let appointmentContextMenuItems = [
-    { text: 'Open', onItemClick: showAppointment },
-    { text: 'Delete', onItemClick: deleteAppointment },
-    { text: 'Repeat Weekly', beginGroup: true, onItemClick: repeatAppointmentWeekly },
-    { text: 'Set Room', beginGroup: true, disabled: true },
-  ];
-
-  $.each(resourcesData, (i, item) => {
-    item.onItemClick = setResource;
-  });
-
-  appointmentContextMenuItems = $.merge(appointmentContextMenuItems, resourcesData);
-
-  const getAppointmentMenuTemplate = function (itemData) {
+  function contextMenuItemTemplate(itemData) {
     const template = $('<div></div>');
 
     if (itemData.color) {
@@ -141,5 +49,85 @@ $(() => {
     }
     template.append(itemData.text);
     return template;
-  };
+  }
+
+  function getAppointmentContextMenuItems(e) {
+    const scheduler = e.component;
+    const { appointmentData: appointment, targetedAppointmentData: targetedAppointment } = e;
+
+    return [
+      {
+        text: 'Open',
+        onItemClick: () => { scheduler.showAppointmentPopup(appointment); },
+      },
+      {
+        text: 'Delete',
+        onItemClick: () => { scheduler.deleteAppointment(appointment); },
+      },
+      {
+        text: 'Repeat Weekly',
+        beginGroup: true,
+        onItemClick: () => {
+          scheduler.updateAppointment(appointment, $.extend(appointment, {
+            startDate: targetedAppointment.startDate,
+            recurrenceRule: 'FREQ=WEEKLY',
+          }));
+        },
+      },
+      {
+        text: 'Set Room',
+        beginGroup: true,
+        disabled: true,
+      },
+      ...resourcesData.map((item) => ({
+        ...item,
+        onItemClick: (clickEvent) => {
+          scheduler.updateAppointment(appointment, $.extend(appointment, {
+            roomId: [clickEvent.itemData.id],
+          }));
+        },
+      })),
+    ];
+  }
+
+  function getCellContextMenuItems(e) {
+    const scheduler = e.component;
+
+    return [
+      {
+        text: 'New Appointment',
+        onItemClick: () => {
+          scheduler.showAppointmentPopup({
+            startDate: e.cellData.startDateUTC,
+          }, true);
+        },
+      },
+      {
+        text: 'New Recurring Appointment',
+        onItemClick: () => {
+          scheduler.showAppointmentPopup({
+            startDate: e.cellData.startDateUTC,
+            recurrenceRule: 'FREQ=DAILY',
+          }, true);
+        },
+      },
+      {
+        text: 'Group by Room/Ungroup',
+        beginGroup: true,
+        onItemClick: () => {
+          if (scheduler.option('groups').length) {
+            scheduler.option({ crossScrollingEnabled: false, groups: [] });
+          } else {
+            scheduler.option({ crossScrollingEnabled: true, groups: ['roomId'] });
+          }
+        },
+      },
+      {
+        text: 'Go to Today',
+        onItemClick: () => {
+          scheduler.option('currentDate', new Date());
+        },
+      },
+    ];
+  }
 });
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
index 7d52d89364e2..41fb881541dd 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
@@ -1,13 +1,3 @@
-.dx-menu-item-content span {
-  margin-right: 5px;
-}
-
-.dx-menu-item-has-submenu .dx-icon-spinright {
-  position: absolute;
-  top: 7px;
-  right: 2px;
-}
-
 .item-badge {
   text-align: center;
   float: left;
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent.blue.light).png
index af445645f9f5..2cd3fcfa7226 100644
Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent.blue.light).png
index 22bd1a350053..424b9aa21903 100644
Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent.blue.light).png differ
diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.ts b/apps/demos/utils/visual-tests/matrix-test-helper.ts
index 90ad4640be4d..8a15baccccd8 100644
--- a/apps/demos/utils/visual-tests/matrix-test-helper.ts
+++ b/apps/demos/utils/visual-tests/matrix-test-helper.ts
@@ -207,18 +207,14 @@ const SKIPPED_TESTS = {
   jQuery: {},
   Angular: {
     Common: ['PopupAndNotificationsOverview'],
-    Scheduler: ['ContextMenu'],
     FileUploader: ['CustomDropzone'],
   },
   Vue: {
     Common: ['PopupAndNotificationsOverview'],
-    // NOTE: Context menu item position is different across themes
-    Scheduler: ['ContextMenu'],
     FileUploader: ['CustomDropzone'],
   },
   React: {
     Common: ['PopupAndNotificationsOverview'],
-    Scheduler: ['ContextMenu'],
     FileUploader: ['CustomDropzone'],
   },
 };