Event Timeline - Resources

Organize events by assigning them to resources in the Event Timeline.

Define resources

Use the resources prop to define the list of resources the events can be associated to 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' },
        ],
      },
    ],
  },
];

Visible resources

Use the defaultVisibleResources prop to initialize the visible resources. A resource is visible if not in the object or if set to true.

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

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 another point in time:

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 properties of the resource model when they don't match the model expected by the components:

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