🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.

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.
weekStartsOn: The day the week starts on (0 = Sunday, 1 = Monday, 6 = Saturday).

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