Event Calendar - Drag Interactions

Reschedule or resize your events using drag-and-drop interactions.

You can move events to a different time slot by dragging them, and resize them by dragging their start or end edge. Both are enabled by default:

Disable event dragging

Use the areEventsDraggable property to prevent dragging events to a different time slot:

<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 a different time slot:

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 a different time slot:

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 drag and resize behavior 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

Use the canDragEventsFromTheOutside and canDropEventsToTheOutside props to drag events between the Event Calendar and external containers. When canDragEventsFromTheOutside is true, you can drop events created with StandaloneEvent into the Event Calendar. When canDropEventsToTheOutside is true, you can drag events out of the Event Calendar.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <EventCalendar />
• <EventCalendarPremium />
• <StandaloneEvent />