Event Timeline - Resources

Define resources to group events, with support for nested hierarchies, custom colors, and visibility controls.

Define resources

Use the resources prop to define available resources, and the resource property on the event model to link an event to its resource:

const event = [
  { resource: 'work' /** other properties */ },
  { resource: 'holidays' /** other properties */ },
];

const resources = [
  { name: 'Work', id: 'work' },
  { name: 'Holidays', id: 'holidays' },
];

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

On the Event Timeline, events without resource are not rendered at all.

Nested resources

Use the children property to create hierarchical resource structures:

const resources = [
  {
    id: 'engineering',
    title: 'Engineering',
    children: [
      {
        id: 'frontend',
        title: 'Frontend',
        children: [
          { id: 'web-app', title: 'Web App' },
          { id: 'mobile-app', title: 'Mobile App' },
        ],
      },
    ],
  },
];

Default collapsed resources

Parent resources can be collapsed to hide their descendants. Use the defaultCollapsedResources prop to initialize the collapsed resources. A resource is expanded unless it is present in the object with a true value.

Controlled collapsed resources

You can also control the collapsed resources using collapsedResources and onCollapsedResourcesChange props:

const [collapsedResources, setCollapsedResources] = React.useState<
  Record<string, boolean>
>({});

return (
  <EventTimelinePremium
    collapsedResources={collapsedResources}
    onCollapsedResourcesChange={setCollapsedResources}
  />
);

Visible resources

Default visible resources

Use the defaultVisibleResources prop to initialize the visible resources. A resource is visible if it's absent from the object or set to true.

Controlled visible resources

You can also control the visible resources using visibleResources and onVisibleResourcesChange props:

const [visibleResources, setVisibleResources] = React.useState<
  Record<string, boolean>
>({});

return (
  <EventTimelinePremium
    visibleResources={visibleResources}
    onVisibleResourcesChange={setVisibleResources}
  />
);

Require a resource

Use the shouldEventRequireResource prop to control whether events must have a resource assigned. When true, the form cannot be submitted with an empty selection — deselecting every entry in the resource picker no longer saves.

On the Event Timeline, shouldEventRequireResource defaults to true so that an event cannot be edited into a state where it would no longer be rendered. Set it to false to allow saving with an empty selection:

<EventTimelinePremium shouldEventRequireResource={false} />

Multiple resources per event

An event can be associated with more than one resource by passing an array to resource:

const event = {
  // ...
  resource: ['team-a', 'team-b'],
};

A multi-resource event renders once per row, each instance taking that row's eventColor unless the event has its own color — in the demo above, "Cross-team sync" renders blue in the Team A row and pink in the Team B row.

The resource picker in the edit dialog switches between a single-select and a multi-select depending on the event:

• An event whose resource is a string is edited as single-resource — the picker shows one entry at a time.
• An event whose resource is an array (including [], meaning multi-resource with nothing selected yet) is edited as multi-resource.

Saving an existing event never changes that shape: one that arrives as a string is always saved back as a string (or undefined once cleared), and one that arrives as an array is always saved back as an array ([] once cleared).

For a new event, or an existing one whose resource is null or not set, there's no shape to preserve — canHaveMultipleResources on eventCreation decides the picker instead. When creating, the resource of the row you clicked in only pre-selects an entry: in multiple mode, a new event created in the "Team A" row starts as ['team-a'], not 'team-a'.

<EventTimelinePremium eventCreation={{ canHaveMultipleResources: true }} />

When canHaveMultipleResources isn't set, it's inferred from the events prop: the first event with a resource value determines the mode for new events (a string means single, an array means multiple), and data with no resource at all defaults to multiple.

Resource properties

Color

Use the eventColor property to define a resource's color. The available color palettes are shown below:

Drag interactions

Use the areEventsDraggable property to prevent dragging a resource's events to a different time slot:

const resource = {
  // ...other properties
  areEventsDraggable: false,
};

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

const resource = {
  // ...other properties
  areEventsResizable: false,
  areEventsResizable: "start" // only the start edge is draggable.
  areEventsResizable: "end" // only the end edge is draggable.
};

See Drag interactions for details.

Read-only

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

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

See Editing—Read-only for details.

Resource column label

Use the resourceColumnLabel prop to customize the header of the resource column:

When both are provided, resourceColumnLabel takes priority over localeText.timelineResourceTitleHeader.

Store data in custom properties

Use the resourceModelStructure prop to define how to read resource properties when your data doesn't match the expected model:

const resourceModelStructure = {
  title: {
    getter: (resource) => resource.name,
  },
};

function Timeline() {
  return (
    <EventTimelinePremium
      resources={[{ name: 'Resource 1' /** ... */ }]}
      resourceModelStructure={resourceModelStructure}
    />
  );
}

API

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

• <EventTimelinePremium />