Drag & Drop

React Scheduler Pro comes with built-in native drag-and-drop support. No external libraries required.

Enabling Drag & Drop

Drag and drop is enabled by default. You can control it with the draggable and resizable props.

<Scheduler
  events={events}
  fields={fields}
  draggable={true}
  resizable={true}
  onEventDrop={handleEventDrop}
  onEventResize={handleEventResize}
/>

Moving Events

Users can click and drag any event to move it to a different time slot, day, or resource.

const handleEventDrop = ({ event, start, end, resource, originalEvent }) => {
  // Update your events state with the new times
  setEvents((prev) =>
    prev.map((e) =>
      e._id === event._id ? { ...e, startDate: start, endDate: end } : e
    )
  );
};

Callback: `onEventDrop`

Property	Type	Description
`event`	`object`	The event that was dropped
`start`	`Date`	New start time
`end`	`Date`	New end time
`resource`	`object \| undefined`	The target resource (if using resources)
`originalEvent`	`object`	The event before it was moved

Resizing Events

Users can drag the bottom edge of an event to change its duration. A resize handle appears when hovering near the bottom of an event.

const handleEventResize = ({ event, start, end, originalEvent }) => {
  setEvents((prev) =>
    prev.map((e) =>
      e._id === event._id ? { ...e, startDate: start, endDate: end } : e
    )
  );
};

Callback: `onEventResize`

Property	Type	Description
`event`	`object`	The event that was resized
`start`	`Date`	Start time (unchanged)
`end`	`Date`	New end time
`originalEvent`	`object`	The event before resize

Disabling Drag & Drop

// Disable both
<Scheduler draggable={false} resizable={false} />

// Disable only resize
<Scheduler draggable={true} resizable={false} />

Touch Support

Drag and drop works on touch devices out of the box. Long-press an event to start dragging on mobile.

Snap to Grid

Events snap to the nearest time interval based on your step prop. For example, with step={30}, events snap to 30-minute intervals.