Scheduler - Drag Interaction

Re-scheduler or resize your events using drag and drop.

Drag and resize events

You can enable the dragging and resizing of events within the Event Calendar or the Timeline using the areEventsDraggable and areEventsResizable props. When areEventsDraggable is true, the events can be dragged to another point in time. When areEventsResizable is true, the event extremities can be dragged to change its duration.

Basic Event Calendar

Basic Timeline

Only allow dragging and resizing some events

You can enable the dragging and resizing only on some events using the draggable and resizable properties on these events.

const event = {
  // ...other even properties
  draggable: true,
  resizable: true,
};

In the example below, only the "Lunch" event on Tuesday is draggable and resizable:

Only allow dragging and resizing events of some resources

You can enable the dragging and resizing for all events of a specific resource using the areEventsDraggable and areEventsResizable properties on the resource.

const resources = [
  {
    id: 'work',
    title: 'Work',
    areEventsDraggable: true,
    areEventsResizable: true,
  },
  {
    id: 'birthdays',
    title: 'Birthdays',
  },
];

In the example below, only "Work" events (and its children: "eXplore Team", "Data Grid Team", etc.) can be dragged and resized:

Priority order

The priority order for determining if an event is draggable or resizable is:

1. Event-level: The draggable and resizable properties on the event take the highest precedence.
2. Resource-level: The areEventsDraggable and areEventsResizable properties on the resource are checked next. If the property is not defined on the resource, it checks the parent resource, and so on up the hierarchy.
3. Component-level: The areEventsDraggable and areEventsResizable props on the component are used as the final fallback.

With the following code, all "work" events are draggable except "event-3":

function App() {
  const resources = [
    { id: 'work', title: 'Work', areEventsDraggable: true },
    { id: 'personal', title: 'Personal' },
  ];

  const events = [
    { id: 'event-1', resource: 'work' },
    { id: 'event-2', resource: 'personal' },
    { id: 'event-3', resource: 'work', draggable: false },
  ];

  return <EventCalendar resources={resources} events={events} />;
}

Only allow resizing one side

You can enable the resizing only for one side of your events by setting the areEventsResizable to "start" or "end":

<EventCalendar areEventsResizable="end" />

External drag and drop

You can enable the dragging from and to the outside of the Event Calendar using the canDragEventsFromTheOutside and canDropEventsToTheOutside props. When canDragEventsFromTheOutside is true, the events created with <StandaloneEvent /> can be dropped inside the Event Calendar. When canDropEventsToTheOutside is true, the events from within the Event Calendar can be dropped outside of it.

Basic Event Calendar

Basic Timeline