Event Timeline - 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:

<EventTimelinePremium areEventsDraggable={false} />

Disable event resizing

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

<EventTimelinePremium 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

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

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

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

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

<EventTimelinePremium 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 <EventTimelinePremium resources={resources} events={events} />;
}

External drag and drop

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

API

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

• <EventTimelinePremium />