Scheduler - Fix unstable ContextMenu demo test

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html

@@ -28,7 +28,7 @@
 >
   <div *dxTemplate="let e of 'item'">
     @if(e.color) {
-    <div class="item-badge" [ngStyle]="{ backgroundColor: e.color }"></div>
+    <div class="item-badge" [style.background-color]="e.color"></div>
     }
     <div class="item-text">{{ e.text }}</div>
   </div>

apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx

@@ -5,7 +5,7 @@ import type { SchedulerTypes, SchedulerRef } 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';
 
@@ -142,7 +142,7 @@ const App = () => {
         target={target}
         disabled={disabled}
         onItemClick={onContextMenuItemClick}
-        itemComponent={AppointmentMenuTemplate}
+        itemComponent={ItemTemplate}
       />
     </>
   );

apps/demos/Demos/Scheduler/ContextMenu/React/AppointmentTemplate.tsx → 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;

apps/demos/Demos/Scheduler/ContextMenu/jQuery/index.js

@@ -11,16 +11,10 @@ $(() => {
     startDayHour: 9,
     recurrenceEditMode: 'series',
     onAppointmentContextMenu(e) {
-      updateContextMenu(
-        false,
-        appointmentContextMenuItems,
-        appointmentClassName,
-        itemTemplate,
-        onItemClick(e),
-      );
+      updateContextMenu(false, appointmentContextMenuItems, appointmentClassName, e);
     },
     onCellContextMenu(e) {
-      updateContextMenu(false, cellContextMenuItems, cellClassName, 'item', onItemClick(e));
+      updateContextMenu(false, cellContextMenuItems, cellClassName, e);
     },
     resources: [{
       fieldExpr: 'roomId',
@@ -36,28 +30,20 @@ $(() => {
     dataSource: [],
     disabled: true,
     target: appointmentClassName,
+    itemTemplate,
   }).dxContextMenu('instance');
 
-  const updateContextMenu = function (disable, dataSource, target, itemTemplate, onItemClick) {
+  const updateContextMenu = function (disable, dataSource, target, contextMenuEvent) {
     contextMenuInstance.option({
       dataSource,
       target,
-      itemTemplate,
-      onItemClick,
+      onItemClick: (e) => {
+        e.itemData.onItemClick(contextMenuEvent);
+      },
       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,
@@ -130,7 +116,7 @@ $(() => {
 
   appointmentContextMenuItems = $.merge(appointmentContextMenuItems, resourcesData);
 
-  const getAppointmentMenuTemplate = function (itemData) {
+  function itemTemplate(itemData) {
     const template = $('<div></div>');
 
     if (itemData.color) {
@@ -141,5 +127,5 @@ $(() => {
     }
     template.append(itemData.text);
     return template;
-  };
+  }
 });

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'],
   },
 };

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts

@@ -1058,12 +1058,15 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
   _attachContextMenuEvent() {
     this._createContextMenuAction();
 
-    const cellSelector = `.${DATE_TABLE_CELL_CLASS},.${ALL_DAY_TABLE_CELL_CLASS}`;
-    const $element = this.$element();
     const eventName = addNamespace(contextMenuEventName, this.NAME);
 
-    eventsEngine.off($element, eventName, cellSelector);
-    eventsEngine.on($element, eventName, cellSelector, this._contextMenuHandler.bind(this));
+    const dateCellSelector = `.${DATE_TABLE_CELL_CLASS}`;
+    eventsEngine.off(this._$dateTable, eventName, dateCellSelector);
+    eventsEngine.on(this._$dateTable, eventName, dateCellSelector, this._contextMenuHandler.bind(this));
+
+    const dayCellSelector = `.${ALL_DAY_TABLE_CELL_CLASS}`;
+    eventsEngine.off(this._$allDayTable, eventName, dayCellSelector);
+    eventsEngine.on(this._$allDayTable, eventName, dayCellSelector, this._contextMenuHandler.bind(this));
   }
 
   _contextMenuHandler(e) {