Scheduler - Create appointment by selected range

[aleksei-semikozov]

No description provided.

[Copilot]

Pull request overview

Adds a new public Scheduler event (onSelectionEnd) to enable scenarios like creating an appointment after the user finishes selecting a date range, and wires it through core, typings, wrappers, tests, and demos.

Changes:

• Introduces SelectionEndEvent + onSelectionEnd option in Scheduler typings and action plumbing.
• Implements selection-end dispatch in the workspace (fires on pointer-up after a selection that started on a cell).
• Adds Jest/QUnit coverage and new “Create from Selection” demos across frameworks (Angular/React/Vue/jQuery) + demo metadata/artifacts.

Reviewed changes

Copilot reviewed 28 out of 33 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/devextreme/ts/dx.all.d.ts	Public typings: adds SelectionEndEvent and dxSchedulerOptions.onSelectionEnd.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.events.tests.js	QUnit event integrity test updated to include onSelectionEnd.
packages/devextreme/js/ui/scheduler_types.d.ts	Re-exports SelectionEndEvent for consumers.
packages/devextreme/js/ui/scheduler.d.ts	Adds SelectionEndEvent and onSelectionEnd option + event integrity list update.
packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts	Implements selection-end action creation + document pointer-up listener to fire onSelectionEnd.
packages/devextreme/js/__internal/scheduler/m_scheduler.ts	Adds onSelectionEnd action creation and forwards workspace callback to public action with component/element.
packages/devextreme/js/__internal/scheduler/tests/selection_end_event.test.ts	New Jest test validating onSelectionEnd firing and payload.
packages/devextreme/js/__internal/scheduler/tests/mock/model/scheduler.ts	Adds getWorkspace() helper in scheduler test POM.
packages/devextreme-vue/src/scheduler.ts	Exposes onSelectionEnd prop/event typing for Vue wrapper.
packages/devextreme-react/src/scheduler.ts	Exposes onSelectionEnd typing and marks it as an independent event for React wrapper.
packages/devextreme-angular/src/ui/scheduler/index.ts	Adds Angular @Output() onSelectionEnd and subscribes to selectionEnd.
apps/demos/menuMeta.json	Registers new “Scheduler / Create from Selection” demo entry.
apps/demos/Demos/Scheduler/CreateFromSelection/jQuery/index.js	jQuery demo: opens appointment popup from selected range on onSelectionEnd.
apps/demos/Demos/Scheduler/CreateFromSelection/jQuery/index.html	jQuery demo page scaffold.
apps/demos/Demos/Scheduler/CreateFromSelection/jQuery/data.js	jQuery demo data/resources.
apps/demos/Demos/Scheduler/CreateFromSelection/Vue/index.ts	Vue demo bootstrap.
apps/demos/Demos/Scheduler/CreateFromSelection/Vue/index.html	Vue demo page scaffold.
apps/demos/Demos/Scheduler/CreateFromSelection/Vue/data.ts	Vue demo data/resources.
apps/demos/Demos/Scheduler/CreateFromSelection/Vue/App.vue	Vue demo: handles @selection-end to create appointment.
apps/demos/Demos/Scheduler/CreateFromSelection/ReactJs/index.js	ReactJs demo bootstrap.
apps/demos/Demos/Scheduler/CreateFromSelection/ReactJs/index.html	ReactJs demo page scaffold.
apps/demos/Demos/Scheduler/CreateFromSelection/ReactJs/data.js	ReactJs demo data/resources.
apps/demos/Demos/Scheduler/CreateFromSelection/ReactJs/App.js	ReactJs demo: handles onSelectionEnd to create appointment.
apps/demos/Demos/Scheduler/CreateFromSelection/React/index.tsx	React (TS) demo bootstrap.
apps/demos/Demos/Scheduler/CreateFromSelection/React/index.html	React (TS) demo page scaffold.
apps/demos/Demos/Scheduler/CreateFromSelection/React/data.ts	React (TS) demo typed data/resources.
apps/demos/Demos/Scheduler/CreateFromSelection/React/App.tsx	React (TS) demo: handles onSelectionEnd to create appointment.
apps/demos/Demos/Scheduler/CreateFromSelection/Angular/index.html	Angular demo page scaffold.
apps/demos/Demos/Scheduler/CreateFromSelection/Angular/app/app.service.ts	Angular demo data/service definitions.
apps/demos/Demos/Scheduler/CreateFromSelection/Angular/app/app.component.ts	Angular demo: handles onSelectionEnd to create appointment.
apps/demos/Demos/Scheduler/CreateFromSelection/Angular/app/app.component.html	Angular demo scheduler markup wiring (onSelectionEnd).
apps/demos/testing/etalons/Scheduler-CreateFromSelection (material.blue.light).png	Visual regression baseline for the new demo.

[sjbur]

Is this a behavior that we expect:

1. Select cells — receive onSelectionEnd event
2. Click on selected cells — we receive onSelectionEnd event and appointment popup also shows up

Maybe we need to add some guard to avoid duplication of onSelectionEnd?

[sjbur]

Question: do we want to support this behavior for keyboard navigation? We have keyboard navigation with arrow buttons(shift + arrow buttons), but I don't see the implemention supporting it

[sjbur]

Typescript error here, please fix it:
Property 'component' does not exist on type 'unknown'.
Property 'selectedCellData' does not exist on type 'unknown'.

[aleksei-semikozov]

fixed

[Copilot]

Pull request overview

Copilot reviewed 28 out of 33 changed files in this pull request and generated 1 comment.

[Copilot]

eventsEngine.off(document, SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME) in _dispose() removes all document handlers registered under that namespace, which can unintentionally detach onSelectionEnd listeners belonging to other Scheduler instances. This should be paired with an instance-specific namespace and/or an exact handler reference so disposing one workspace doesn’t affect others.

[aleksei-semikozov]

Is this a behavior that we expect:

1. Select cells — receive onSelectionEnd event
2. Click on selected cells — we receive onSelectionEnd event and appointment popup also shows up

Maybe we need to add some guard to avoid duplication of onSelectionEnd?

Great catch, thanks for the careful review — fixed and covered with a test

[aleksei-semikozov]

Question: do we want to support this behavior for keyboard navigation? We have keyboard navigation with arrow buttons(shift + arrow buttons), but I don't see the implemention supporting it

There is no clean "end of keyboard selection" moment:

• Shift+Arrow is incremental — each press is both the start and the end of an extension.
• Firing on Shift keyup is fragile: it triggers even with no arrow press at all, and keyup can be missed on focus loss / IME / window switch.
• We did not find an established pattern for this in comparable scheduler widgets.

If someone really wants to react to "Shift released after a range" we have WA:

const scheduler = $('#scheduler').dxScheduler('instance');

$(scheduler.element()).on('keyup', (e) => {
  if (e.key !== 'Shift') return;

  const cells = scheduler.option('selectedCellData');
  if (!cells || cells.length < 2) return;

  scheduler.showAppointmentPopup({
    startDate: cells[0].startDate,
    endDate: cells[cells.length - 1].endDate,
  }, true);
});

I'll file a follow-up issue to research proper keyboard support separately.

[Copilot]

Pull request overview

Copilot reviewed 28 out of 33 changed files in this pull request and generated 1 comment.

[sjbur]

Found a bug in demo:

• Select cells in all day panel
• Create appointment
• The appointment is not being created in all day panel

The reason for this is that allDay flag is not being passed to showAppointmentPopup

[aleksei-semikozov]

Found a bug in demo:

• Select cells in all day panel
• Create appointment
• The appointment is not being created in all day panel

The reason for this is that allDay flag is not being passed to showAppointmentPopup

fixed

[Copilot]

Pull request overview

Copilot reviewed 28 out of 33 changed files in this pull request and generated no new comments.