Skip to content

[scheduler][primitives] Allow to expand / shrink an event duration using drag & drop in the Time Grid #17692

@flaviendelangle

Description

@flaviendelangle

People should be able to edit the duration of an event by dragging the start of the end of the event vertically.

Screencast.2025-05-06.08.27.55.mp4

In this PR

  • Add a prop on the TimeGrid.Event part to enable this behavior
  • Add a areItemsResizable prop on the Event Calenar component and store it in state.areItemsResizable
  • Pass state.areItemsResizable in the DayTimeGrid to every event rendered
  • Allow to expand / shrink an event by dragging its start or end time
  • Correctly round the duration (hardcoding the rounding to 15mn for now)

Not in this PR:

  • Allow drag&drop across several days (if it's easy we can do it, but don't hesitate to split the work)
  • Not in this PR: allow to enable / disable this behavior on specific events or resources
  • Add constraints (only expand, only drag the start, only drag the end etc...)

Metadata

Metadata

Labels

scope: schedulerChanges related to the scheduler.type: new featureExpand the scope of the product to solve a new problem.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions