Event Timeline - Editing

Configure how events are created and edited.

Event creation

Use the eventCreation prop to customize how newly created events are defined:

Disable event creation

Pass eventCreation={false} to disable the event creation:

<EventTimelinePremium eventCreation={false} />

Custom default duration

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

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

Create event on click

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

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

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 determining if an event is read-only is:

1. The readOnly property assigned to the event

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

2. The areEventsReadOnly property assigned to the event's resource

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

3. 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} />;
}