Drag and resize

Moving

Drag an event to another time or another resource. When the pointer is released over a valid place, onEventDrop is called:

onEventDrop={(event, fromResourceId, toResourceId, newStart, newEnd) => { /* update state */ }}

• In the day view the start of the event snaps to the slot under the pointer.
• In the week view and longer the event moves by whole days and keeps its time of day.
• The duration is kept. Slots covered by other events are valid targets (so the conflict rules can judge them).
• Esc while dragging cancels.

Resizing

Provide onEventResize and every event gets edge handles:

onEventResize={(event, resourceId, newStart, newEnd) => { /* update state */ }}

Edges snap to whole slots (or whole days). The slot under the pointer is always included in the result, and an edge cannot cross the opposite one. While you drag, every slot the event would cover is tinted.

Touch and pen

Dragging uses Pointer Events, so it works with touch and pen as well as the mouse, and it never touches a drag-and-drop setup your app already has. Events set touch-action: none so the page does not scroll under a dragging finger. That means swiping on an event does not scroll the board; swipe on empty space instead.

To create with touch, tap an empty slot to select it, or press and hold one for about a third of a second, then drag across more slots and lift: the selected slots light up and go to onSlotSelect (or onEventCreate) exactly as a mouse drag does. A quick swipe on empty space still scrolls the board. Tested with Chrome’s touch emulation; not yet on physical devices.

Rejecting a change

Everything above is subject to the conflict rules. A rejected place shows in red and your handler is never called.