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}
    />
  );
}

Custom event content

Use the timelineEventContent slot to replace the text rendered inside an event block. The slot receives the occurrence, the resource of the row it is rendered in and the variant of the block. It is placed inside the block, so the block keeps its geometry, its drag and resize handles, and its button semantics.

The slot also renders in the placeholder that previews a drag, a resize or a creation, with variant set to "placeholder" and an occurrence carrying the pending dates.

The content of the slot is part of the accessible name of the event, so keep some text in it. Links, buttons, and inputs rendered by the slot keep their own clicks and keys: activating them doesn't open the editing surface, Tab reaches them before moving to the next event, and the arrow keys don't move the focus to another row.

Typing custom slot props

Pass extra props to the slot through slotProps.timelineEventContent and type them by augmenting the TimelineEventContentPropsOverrides interface:

declare module '@mui/x-scheduler-premium/models' {
  interface TimelineEventContentPropsOverrides {
    showCode?: boolean;
  }
}

<EventTimelinePremium
  slots={{ timelineEventContent: EventContent }}
  slotProps={{ timelineEventContent: { showCode: true } }}
/>;

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