Scheduler - Add onSelectionEnd event

Author: aleksei-semikozov

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -421,6 +421,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       case StoreEventNames.DELETED:
       case 'onAppointmentFormOpening':
       case 'onAppointmentTooltipShowing':
+      case 'onSelectionEnd':
         this.actions[name] = this._createActionByOption(name);
         break;
       case 'onAppointmentRendered':
@@ -1007,6 +1008,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       onAppointmentDeleted: this._createActionByOption(StoreEventNames.DELETED),
       onAppointmentFormOpening: this._createActionByOption('onAppointmentFormOpening'),
       onAppointmentTooltipShowing: this._createActionByOption('onAppointmentTooltipShowing'),
+      onSelectionEnd: this._createActionByOption('onSelectionEnd'),
     };
   }
 
@@ -1468,6 +1470,13 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       onSelectionChanged: (args) => {
         this.option('selectedCellData', args.selectedCellData);
       },
+      onSelectionEnd: (args) => {
+        this.actions.onSelectionEnd({
+          component: this,
+          element: this.$element(),
+          selectedCellData: args.selectedCellData,
+        });
+      },
       groupByDate: this.getViewOption('groupByDate'),
       skippedDays: this.getViewOption('hiddenWeekDays') as number[],
       scrolling,

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

@@ -171,6 +171,7 @@ const SCHEDULER_CELL_DXCLICK_EVENT_NAME = addNamespace(clickEventName, 'dxSchedu
 
 const SCHEDULER_CELL_DXPOINTERDOWN_EVENT_NAME = addNamespace(pointerEvents.down, 'dxSchedulerDateTable');
 const SCHEDULER_CELL_DXPOINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, 'dxSchedulerDateTable');
+const SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, 'dxSchedulerTable');
 
 const SCHEDULER_CELL_DXPOINTERMOVE_EVENT_NAME = addNamespace(pointerEvents.move, 'dxSchedulerDateTable');
 
@@ -221,6 +222,10 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   private selectionChangedAction: any;
 
+  private selectionEndAction: any;
+
+  private isSelectionStartedOnCell = false;
+
   private isCellClick: any;
 
   private contextMenuHandled: any;
@@ -986,6 +991,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   protected attachEvents() {
     this.createSelectionChangedAction();
+    this.createSelectionEndAction();
     this.attachClickEvent();
     this.attachContextMenuEvent();
   }
@@ -1014,6 +1020,14 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       const $cell = $(e.target);
       that.cellClickAction({ event: e, cellElement: getPublicElement($cell), cellData: that.getCellData($cell) });
     });
+
+    (eventsEngine.off as any)(domAdapter.getDocument(), SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME);
+    eventsEngine.on(domAdapter.getDocument(), SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME, () => {
+      if (this.isSelectionStartedOnCell) {
+        this.fireSelectionEndEvent();
+        this.isSelectionStartedOnCell = false;
+      }
+    });
   }
 
   private createCellClickAction() {
@@ -1026,10 +1040,15 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     this.selectionChangedAction = this._createActionByOption('onSelectionChanged');
   }
 
+  private createSelectionEndAction() {
+    this.selectionEndAction = this._createActionByOption('onSelectionEnd');
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private cellClickHandler(argument?: any) {
     if (this.showPopup) {
       delete this.showPopup;
+      this.isSelectionStartedOnCell = false;
       this.handleSelectedCellsClick();
     }
   }
@@ -1039,10 +1058,12 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
     if (!$target.hasClass(DATE_TABLE_CELL_CLASS) && !$target.hasClass(ALL_DAY_TABLE_CELL_CLASS)) {
       this.isCellClick = false;
+      this.isSelectionStartedOnCell = false;
       return;
     }
 
     this.isCellClick = true;
+    this.isSelectionStartedOnCell = true;
     if ($target.hasClass(DATE_TABLE_FOCUSED_CELL_CLASS)) {
       this.showPopup = true;
     } else {
@@ -1932,6 +1953,13 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     this.selectionChangedAction({ selectedCellData });
   }
 
+  private fireSelectionEndEvent() {
+    const selectedCellData = this.option('selectedCellData') ?? [];
+    if (selectedCellData.length > 0 && this.selectionEndAction) {
+      this.selectionEndAction({ selectedCellData });
+    }
+  }
+
   private getCellByData(cellData) {
     const {
       startDate, groupIndex, allDay, index,
@@ -2370,6 +2398,9 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       case 'onSelectionChanged':
         this.createSelectionChangedAction();
         break;
+      case 'onSelectionEnd':
+        this.createSelectionEndAction();
+        break;
       case 'onCellClick':
         this.createCellClickAction();
         break;