Scheduler - Timeline

The Timeline component lets users manage events in a timeline layout.

Basic example

Customization

Initialize / control the preferences

You can customize the Timeline by providing the defaultPreferences prop.

Available properties:

ampm: Sets the initial time format. true uses 12-hour (AM/PM), false uses 24-hour. Defaults to true.

You can also control the preferences using preferences and onPreferencesChange props:

const [preferences, setPreferences] = React.useState<
  TimelinePreferences | undefined
>(undefined);

return <Timeline preferences={preferences} onPreferencesChange={setPreferences} />;