Event Timeline - Events

Configure event properties including color, timezone, recurrence, and custom data mapping.

Event properties

Resource

Use the resource property to link an event to its resource:

const event = {
  // ...other properties
  resource: 'work',
};

Dynamic resource

Use the eventModelStructure property to switch the resource between several fields:

All day

Use the allDay property to define an event as all-day:

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

Timezone

Use the timezone property to specify the timezone for an event's dates:

const event = {
  // ...other properties
  timezone: 'America/New_York',
};

See Timezone for details.

Color

Use the color property to define an event's color:

const event = {
  // ...other properties
  color: 'lime',
};

The available color palettes are shown below:

Class name

Use the className property to apply custom CSS styles to an event:

const event = {
  // ...other properties
  className: 'highlighted-event',
};

When defined, it applies to the event root DOM element across all views.

Drag interactions

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,
  resizable: "start" // only the start edge is draggable.
  resizable: "end" // only the end edge is draggable.
};

See Drag interactions for details.

Read-only

Use the readOnly property to prevent an event from being modified:

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

See Editing—Read-only for details.

Recurring events

Use the rrule property to define an event's recurring rule:

const event = {
  // ...other properties
  rrule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=TH',
};

See Recurring events for details.

Store data in custom properties

Use the eventModelStructure prop to define how to read and write event properties when your data doesn't match the expected model:

const eventModelStructure = {
  title: {
    getter: (event) => event.name,
    setter: (event, newValue) => {
      event.name = newValue;
    },
  },
};

function Timeline() {
  return (
    <EventTimelinePremium
      events={[{ name: 'Event 1' /** ... */ }]}
      eventModelStructure={eventModelStructure}
    />
  );
}

A property declared with a getter but no setter is not writable: the Event Timeline can display it but never writes it back to your model.

When start or end is not writable, that date can't move: dragging is disabled, and only the other side's resize handle stays enabled. Saving other changes in the event dialog leaves that date unchanged. Creating a new event is refused when either date is not writable, since a new event has no old date to fall back to.

Event constraints 🚧

With this feature, users would be able to define constraints on events, such as restricting them to specific time ranges or resources.

API

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

• <EventTimelinePremium />