Event Calendar - Drag Interaction

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

Events can be moved to a different time slot by dragging them, and resized by dragging their start or end edge. Both behaviors are enabled by default:

Disable event dragging

Use the areEventsDraggable property to prevent dragging events to another point in time:

<EventCalendar areEventsDraggable={false} />

Disable event resizing

Use the areEventsResizable property to prevent resizing events by dragging their start or end edge:

<EventCalendar areEventsResizable={false} />

Only disable on some events

Per event

Use the draggable property on the event model to prevent an event from being dragged to another point in time:

const event = {
  // ...other properties
  draggable: false,
};

Use the resizable property on the event model to prevent an event from being resized by dragging its start or end edge:

const event = {
  // ...other properties
  resizable: false,
};

Per resource

Use the areEventsDraggable property on the resource model to prevent dragging a resource's events to another point in time:

const resource = {
  // ...other properties
  areEventsDraggable: false,
};

Use the areEventsResizable property on the resource model to prevent resizing a resource's events by dragging their start or end edge:

const resource = {
  // ...other properties
  areEventsResizable: false,
};

Priority order

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

1. The draggable and resizable properties assigned to the event

<EventCalendar
  events={[{ id: '1', title: 'Event 1', draggable: false, resizable: false }]}
/>

2. The areEventsDraggable and areEventsResizable properties assigned to the event's resource

<EventCalendar
  resources={[
    {
      id: '1',
      title: 'Resource 1',
      areEventsDraggable: false,
      areEventsResizable: false,
    },
  ]}
/>

3. The areEventsDraggable and areEventsResizable props assigned to the Event Calendar

<EventCalendar areEventsDraggable={false} areEventsResizable={false} />

For example, with the following code, all "work" events are not draggable except "event-3":

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

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

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

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.