Event Timeline - Events

Define events for your Event Timeline.

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 define in which timezone an event's dates are defined:

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

Color

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

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

Here is the list of all the available color palettes:

Class name

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

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

Drag interactions

Use the draggable property on the event model to prevent an event from being dragged to another point in time:

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.
};

Read-only

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

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

Recurring events

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

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

Store data in custom properties

Use the eventModelStructure prop to define how to read and write properties of the event model when they don't match the model expected by the components:

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

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

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