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 resource of an event cannot be cleared from the edit dialog and the form cannot be submitted with an empty resource.

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 clearing the resource:

<EventTimelinePremium shouldEventRequireResource={false} />

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