Scheduler - Appointments refactoring - Drag-n-Drop by Tucchhaa · Pull Request #33690 · DevExpress/DevExtreme

Tucchhaa · 2026-05-25T07:51:23Z

This PR adds DnD functionality for refactored appointments.
The old DnD implementation was scattered across several files:

/m_appointment_drag_behavior
workspaces/m_work_space
m_compact_appointments_helper
m_subscribes/m_scheduler/m_appointments_collection received dragEvent and managed it depending on the update results

In the new implementation the whole DnD is located in the appointments_drag_controller.ts and dragEvent is not passed to the scheduler at all.

Tucchhaa · 2026-05-25T07:57:42Z

    );
  }

+  public getCellFromDragTarget($dragTarget: dxElementWrapper): dxElementWrapper | null {


This method has the same logic as old method

Tucchhaa · 2026-05-25T07:58:54Z

        appointment,
        targetedAppointment,
        color: this.resourceManager.getAppointmentColor(appointmentConfig),
+        settings,


This change won't affect anything for the old impl. Needed to match AppointmentTooltipItem type

Copilot

Pull request overview

This PR advances the Scheduler “new appointments” refactoring by introducing a dedicated drag-and-drop controller and wiring it into the workspace + tooltip flows when _newAppointments is enabled, while gating/annotating legacy drag code paths.

Changes:

Added AppointmentDragController and integrated it into Scheduler for workspace appointment dragging and tooltip list item dragging under _newAppointments.
Added workspace hit-testing (getCellFromDragTarget) and tooltip list lifecycle hooks (onInitialized/onDisposing) to support the new DnD flow.
Updated/added Jest tests and test POM helpers for the new dragging behavior; adjusted an existing QUnit tooltip test assertion.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/desktopTooltip.tests.js	Loosened List options assertion (removed “keys length” check).
packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts	Disabled legacy drag events for new appointments; added drag target → cell hit-testing helpers.
packages/devextreme/js/__internal/scheduler/types.ts	Updated tooltip/compact appointment typing (`settings` on tooltip items; simplified compact `items` type).
packages/devextreme/js/__internal/scheduler/tooltip_strategies/tooltip_strategy_base.ts	Added List lifecycle hooks (`onInitialized` / `onDisposing`) to tooltip list options.
packages/devextreme/js/__internal/scheduler/tooltip_strategies/desktop_tooltip_strategy.ts	For new appointments: forward list initialization; skip legacy drag behavior hook in `onContentReady`.
packages/devextreme/js/__internal/scheduler/m_subscribes.ts	Added TODO markers around legacy-only subscribe methods.
packages/devextreme/js/__internal/scheduler/m_scheduler.ts	Integrated `AppointmentDragController`, added draggable container, and added drop-update path for new DnD.
packages/devextreme/js/__internal/scheduler/m_appointment_drag_behavior.ts	Marked legacy drag behavior file as TODO for removal.
packages/devextreme/js/__internal/scheduler/appointments_new/appointments.ts	Refactored rendering flow, added tooltip item construction and drag-clone rendering helpers.
packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts	Updated tests for unified `showAppointmentTooltip` callback shape/signature.
packages/devextreme/js/__internal/scheduler/appointment_drag_controller.ts	New controller implementing workspace + tooltip dragging, clone creation, and cell highlighting.
packages/devextreme/js/__internal/scheduler/tests/appointments_dragging.test.ts	New Jest test suite covering new appointment dragging behavior.
packages/devextreme/js/__internal/scheduler/tests/mock/model/tooltip.ts	Updated tooltip selectors and added a helper to retrieve the tooltip list element.
packages/devextreme/js/__internal/scheduler/tests/mock/model/scheduler.ts	Added helper to locate the dragged clone in the new draggable container.
packages/devextreme/js/__internal/scheduler/tests/mock/model/appointment.ts	Added `isDragSource()` helper for drag-source class assertions.

Tucchhaa · 2026-05-26T10:25:47Z

    this.mainContainer = $('<div>').addClass('dx-scheduler-container');
+    this.$draggableContainer = $('<div>')
+      .addClass('dx-scheduler-draggable-container')
+      .appendTo(this.mainContainer);


In the old implementation the drag clones were placed in the workspace.$fixedContainer.

In new implementation I create a container inside scheduler's mainContainer, because I pass the container to the draggable at DragController's creation at this moment workSpace is not defined yet.
And if feels more right, because draggable container is used not only by workspace, but also by tooltip

Tucchhaa · 2026-05-26T10:27:53Z

    }

-    if (isPromise(updatingOptions.cancel) && dragEvent) {
+    if (isPromise(updatingOptions.cancel) && (dragEvent || this.option('_newAppointments'))) {


in new appts no need to pass dragEvent, because dragController receives promise on updateAppointmentOnDrop, after which it removes the necessary css classes.

Tucchhaa · 2026-05-26T11:01:54Z

    return this.viewItemBySortedIndex[sortedIndex];
  }

+  public getViewModelBySortedIndex(sortedIndex: number): AppointmentViewModelPlain {


needed to create tooltip item for single appt (not collector) on tooltip showing

Tucchhaa · 2026-05-26T11:04:21Z

+    return result;
+  }
+
+  public getAppointmentData($element: dxElementWrapper): SafeAppointment {


needed by DnD, because to update the dragged appointment, the appointmentData is needed.

Currently it's a linear search, which I think is ok (drop happens very rarely).

Another approach would be to use $element.data('appointmentData') to attach appointmentData to the element, but I don't think this is a good idea, because later it could be used anywhere in the codebase which is not supposed to happen

Tucchhaa · 2026-05-26T11:05:43Z


+  // TODO: remove passing index to appointmentTemplate, need only to avoid BC
  private renderViewItem(
-    fragment: DocumentFragment,


moved fragment logic to the viewModel rendering functions, because renderDragClone doesn't pass fragment.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

sjbur · 2026-05-26T11:45:45Z

+
+    this.options.updateAppointmentOnDrop(e.itemData, this.$highlightedCell)
+      .finally(() => { this.removeDraggingClasses($(e.itemElement)); })
+      .catch((err) => { throw err; });


.catch((err) => { throw err; });

Seems like a unhandled promise rejection. Maybe its better to write something like

import { noop } from '@js/core/utils/common'; ... .catch(noop);

What do you think?

In this code, catch will fire only if function inside finally throws, because updateAppointmentOnDrop always resolve (L1685).

I don't want to put noop here, because in this case we wouldn't notice if the error actually happens. This .catch handler is here just to make eslint happy, but basically it's no difference if it's present or not

sjbur · 2026-05-26T11:51:07Z

+    this.removeCellHighlight();
+  }
+
+  private onDragCancel(e): void {


Can you add type here for e?

onDragCancel is a private callback, so there's no type for it, but I will add DragEndEvent because they have similar parameters

sjbur · 2026-05-26T11:53:12Z

+    this.removeDraggingClasses($(e.itemElement));
+  }
+
+  public removeDraggingClasses($dragSource: dxElementWrapper): void {


Do we need this method to be public? Its being used only in class

made it private

sjbur · 2026-05-26T12:32:08Z

I think I found a bug:

Create recurrent appointment
Try to drag an appointment and cancel/close the recurrent appointment edit window
The drag styles for the appointment don't dissappear, it is still semitransparent and it does not change on click or other actions

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

implement

fe9a52a

Tucchhaa self-assigned this May 25, 2026

Tucchhaa added the 26_1 label May 25, 2026

Tucchhaa commented May 25, 2026

View reviewed changes

implement tests

f345d0f

Tucchhaa marked this pull request as ready for review May 26, 2026 10:06

Tucchhaa requested a review from a team as a code owner May 26, 2026 10:06

Copilot AI review requested due to automatic review settings May 26, 2026 10:06

Copilot started reviewing on behalf of Tucchhaa May 26, 2026 10:06 View session

Copilot AI reviewed May 26, 2026

View reviewed changes

Tucchhaa commented May 26, 2026

View reviewed changes

Tucchhaa added 2 commits May 26, 2026 18:33

fix tooltip jest tests

eda5cf9

apply copilot's suggestion

f247b89

Copilot AI review requested due to automatic review settings May 26, 2026 11:00

Tucchhaa commented May 26, 2026

View reviewed changes

Merge branch '26_1' into appt_dnd_26_1

d5b45b0

Copilot AI reviewed May 26, 2026

sjbur reviewed May 26, 2026

View reviewed changes

Copilot started reviewing on behalf of Tucchhaa May 26, 2026 12:18 View session

sjbur requested changes May 26, 2026

View reviewed changes

Tucchhaa added 2 commits May 27, 2026 12:16

apply review

5457bec

fix test

7481c62

Copilot AI review requested due to automatic review settings May 27, 2026 05:37

Copilot started reviewing on behalf of Tucchhaa May 27, 2026 05:37 View session

Copilot AI reviewed May 27, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/scheduler/appointment_drag_controller.ts

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

sjbur approved these changes May 27, 2026

View reviewed changes

aleksei-semikozov added a commit to aleksei-semikozov/DevExtreme that referenced this pull request May 27, 2026

Add PR DevExpress#33690 disabled-drag repro playground

3f9a0c4

Tucchhaa merged commit fc2c76d into DevExpress:26_1 May 27, 2026
103 checks passed

Tucchhaa deleted the appt_dnd_26_1 branch May 27, 2026 09:56

Uh oh!

Conversation

Tucchhaa commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tucchhaa May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tucchhaa May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tucchhaa May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tucchhaa May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tucchhaa May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sjbur commented May 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Tucchhaa commented May 25, 2026 •

edited

Loading

Tucchhaa May 26, 2026 •

edited

Loading

Tucchhaa May 26, 2026 •

edited

Loading

Tucchhaa May 26, 2026 •

edited

Loading

Tucchhaa May 26, 2026 •

edited

Loading

Tucchhaa May 26, 2026 •

edited

Loading