Event Timeline - Editing

Configure event creation, editing interactions, and read-only behavior.

Event creation

Use the eventCreation prop to customize event creation behavior:

Disable event creation

Pass eventCreation={false} to disable event creation:

<EventTimelinePremium eventCreation={false} />

Custom default duration

Pass a custom value to eventCreation.duration to change the default duration of newly created events:

<EventTimelinePremium eventCreation={{ duration: 60 }} />

Create event on double-click

Set eventCreation.interaction to "double-click" to open the creation form when double-clicking a cell instead of clicking:

<EventTimelinePremium eventCreation={{ interaction: 'double-click' }} />

Event dialog

Clicking an event or creating a new one opens the event dialog.

The dialog has two tabs:

General: title, start/end date and time, all-day toggle, resource and color selectors, and description.
Recurrence: frequency, interval, days of the week, and end condition.

Click any event in the demo below to open the dialog. From there you can edit the event details or delete it.

Replace the dialog with your own UI

Use the onEventEditingStart callback to intercept editing right before the built-in dialog opens. It fires for every entry point (pointer, keyboard, touch, and event creation). eventDetails.reason is "creation" when the user is creating a new event, "view" when the occurrence is read-only (through the event, its resource, or the readOnly prop) and the dialog opens in view-only mode, and "edit" otherwise. eventDetails.occurrence is typed by that reason, so narrowing on it gives you the persisted occurrence fields on "edit" and "view" and the draft on "creation". eventDetails.anchor is an element that stays in the DOM after a cancellation, ready to anchor your own popover to; eventDetails.trigger identifies the exact activated element, but some flows unmount it right after a canceled activation (the armed toolbar's Edit button, a creation placeholder), so don't position against it. Call eventDetails.cancel() to keep the built-in dialog closed and open your own editing UI instead:

<EventTimelinePremium
  onEventEditingStart={(occurrence, eventDetails) => {
    if (eventDetails.reason === 'view') {
      // Read-only activation: keep the built-in view-only dialog.
      // Cancel here only if you render your own read-only UI instead.
      return;
    }
    eventDetails.cancel();
    if (eventDetails.reason === 'creation') {
      // Creation drafts have a synthetic `id` — use the proposed dates instead.
      openYourCreationUI(eventDetails.occurrence.displayTimezone);
    } else {
      openYourEditingUI(eventDetails.occurrence.id);
    }
  }}
/>

In the demo below, both clicking an event and clicking an empty cell open a custom dialog instead of the built-in one:

Read-only

Use the readOnly prop to disable all editing interactions (event creation, drag-and-drop, resizing, and popover editing):

<EventTimelinePremium readOnly />

Only set on some events

Per event

Use the readOnly property on the event model to mark an event as read-only:

const event = {
  // ...other properties
  readOnly: true,
};

Per resource

Use the areEventsReadOnly property on the resource model to mark all events of a resource as read-only:

const resource = {
  // ...other properties
  areEventsReadOnly: true,
};

Priority order

The priority order for read-only behavior is:

The readOnly property assigned to the event

<EventTimelinePremium events={[{ id: '1', title: 'Event 1', readOnly: true }]} />

The areEventsReadOnly property assigned to the event's resource

<EventTimelinePremium
  resources={[
    {
      id: '1',
      title: 'Resource 1',
      areEventsReadOnly: true,
    },
  ]}
/>

The readOnly prop assigned to the Event Timeline

<EventTimelinePremium readOnly />

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

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

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

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

<EventTimelinePremium />