Event Timeline - Preferences

Customize timeline preferences including the time format.

Initialize the preferences

Use the defaultPreferences prop to initialize the preferences:

const defaultPreferences = {
  ampm: false,
}

<EventTimelinePremium defaultPreferences={defaultPreferences} />;

Available properties:

ampm: Whether the component displays time in 12-hour format with AM/PM. Defaults to the hour cycle of the date locale.
weekStartsOn: The first day of the week, as an ISO weekday, from 1 (Monday) to 7 (Sunday). Defaults to the first day of the week of the date locale.

Resource title

You can also control the preferences using the preferences prop. The Event Timeline has no built-in preferences UI, so changes are driven entirely from your own UI:

const [preferences, setPreferences] = React.useState<
  Partial<EventTimelinePremiumPreferences>
>({ ampm: false });

return (
  <React.Fragment>
    <button
      onClick={() => setPreferences((prev) => ({ ...prev, ampm: !prev.ampm }))}
    >
      Toggle AM/PM
    </button>
    <EventTimelinePremium preferences={preferences} />
  </React.Fragment>
);

API

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

<EventTimelinePremium />