EventTimelinePremium API

API reference docs for the React EventTimelinePremium component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
// or
import { EventTimelinePremium } from '@mui/x-scheduler-premium';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
apiRef	{ current?: { goToNextVisibleDate?: func, goToPreviousVisibleDate?: func, setVisibleDate?: func } }	-	The ref object that allows Event Timeline manipulation. Can be instantiated with `useEventTimelinePremiumApiRef()`.
areEventsDraggable	bool	true	Whether the event can be dragged to change its start and end dates without changing the duration.
areEventsResizable	'end' \| 'start' \| bool	true	Whether the event start or end can be dragged to change its duration without changing its other date. If `true`, both start and end can be resized. If `false`, the events are not resizable. If `"start"`, only the start can be resized. If `"end"`, only the end can be resized.
canDragEventsFromTheOutside	bool	false	Whether events can be dragged from outside of the calendar and dropped into it.
canDropEventsToTheOutside	bool	false	Whether events can be dragged from inside of the calendar and dropped outside of it. If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore. If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
dataSource	{ getEvents: func, updateEvents: func }	-	Data source for fetching events asynchronously. When provided, events are fetched through the data source instead of the `events` prop.
dateLocale	object	enUS (English)	The locale object from `date-fns` used to format dates. This affects day names, month names, week start day, and other locale-dependent formatting. Import a locale from `date-fns/locale` and pass it to this prop.
defaultPreferences	{ ampm?: bool }	{ ampm: true }	The default preferences for the timeline. To use controlled preferences, use the `preferences` prop.
defaultView	'days' \| 'months' \| 'time' \| 'weeks' \| 'years'	"time"	The view initially displayed in the timeline. To render a controlled timeline, use the `view` prop.
defaultVisibleDate	Date	today	The date initially used to determine the visible date range in each view. To render a controlled calendar, use the `visibleDate` prop.
defaultVisibleResources	object	{} - all resources are visible	The IDs of the resources initially visible. To render a controlled scheduler, use the `visibleResources` prop.
displayTimezone	string	"default"	The timezone used to display events in the scheduler. Accepts any valid IANA timezone name (for example "America/New_York", "Europe/Paris", "Asia/Tokyo"), or keywords understood by the adapter, such as "default" (use the adapter's default timezone), "locale" (use the user's current locale timezone), or "UTC". This timezone only affects rendering, events keep their original data timezone.
eventColor	'amber' \| 'blue' \| 'green' \| 'grey' \| 'indigo' \| 'lime' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'teal'	"teal"	The color palette used for all events. Can be overridden per resource using the `eventColor` property on the resource model. Can be overridden per event using the `color` property on the event model.
eventModelStructure	object	-	The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the `CalendarEvent` interface.
events	Array<object>	[]	The events currently available in the calendar.
localeText	object	-	Set the locale text of the Event Timeline. You can find all the translation keys supported in the source in the GitHub repository.
onEventsChange	func	-	Callback fired when some event of the calendar change.
onPreferencesChange	func	-	Event handler called when the preferences change.
onViewChange	func	-	Event handler called when the view changes.
onVisibleDateChange	func	-	Event handler called when the visible date changes.
onVisibleResourcesChange	func	-	Event handler called when the visible resources change.
preferences	{ ampm?: bool }	-	Preferences currently displayed in the timeline.
readOnly	bool	false	Whether the calendar is in read-only mode.
resourceColumnLabel	string	-	The label displayed in the resource column header. When provided, this takes priority over `localeText.timelineResourceTitleHeader`.
resourceModelStructure	object	-	The structure of the resource model. It defines how to read and write the properties of the resource model. If not provided, the resource model is assumed to match the `CalendarResource` interface.
resources	Array<object>	-	The resources the events can be assigned to.
showCurrentTimeIndicator	bool	true	Whether the component should display the current time indicator.
sx	Array<func \| object \| bool> \| func \| object	-	The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
view	'days' \| 'months' \| 'time' \| 'weeks' \| 'years'	-	The view currently displayed in the timeline.
views	Array<'days' \| 'months' \| 'time' \| 'weeks' \| 'years'>	["time", "days", "weeks", "months", "years"]	The views available in the timeline.
visibleDate	Date	-	The date currently used to determine the visible date range in each view.
visibleResources	object	-	The IDs of the resources currently visible. A resource is visible if it is not included in this object or if it is included with `true` value.

The ref is forwarded to the root element.

Theme default props

You can use MuiEventTimelinePremium to change the default props of this component with the theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.MuiEventTimelinePremium-content	content	Styles applied to the content section element.
.MuiEventTimelinePremium-currentTimeIndicator	currentTimeIndicator	Styles applied to the current time indicator element.
.MuiEventTimelinePremium-currentTimeIndicatorCircle	currentTimeIndicatorCircle	Styles applied to the current time indicator circle element.
.MuiEventTimelinePremium-daysHeader	daysHeader	Styles applied to the days header root element.
.MuiEventTimelinePremium-daysHeaderCell	daysHeaderCell	Styles applied to days header cell elements.
.MuiEventTimelinePremium-daysHeaderDayNumber	daysHeaderDayNumber	Styles applied to days header day number elements.
.MuiEventTimelinePremium-daysHeaderMonthStart	daysHeaderMonthStart	Styles applied to days header month start elements.
.MuiEventTimelinePremium-daysHeaderMonthStartLabel	daysHeaderMonthStartLabel	Styles applied to days header month start label elements.
.MuiEventTimelinePremium-daysHeaderTime	daysHeaderTime	Styles applied to days header time elements.
.MuiEventTimelinePremium-daysHeaderWeekDay	daysHeaderWeekDay	Styles applied to days header week day elements.
.MuiEventTimelinePremium-event	event	Styles applied to event elements.
.MuiEventTimelinePremium-eventDialog	eventDialog	Styles applied to the event dialog root element.
.MuiEventTimelinePremium-eventDialogActions	eventDialogActions	Styles applied to the event dialog actions element.
.MuiEventTimelinePremium-eventDialogCloseAction	eventDialogCloseAction	Styles applied to the event dialog close action button element.
.MuiEventTimelinePremium-eventDialogCloseButton	eventDialogCloseButton	Styles applied to the event dialog close button element.
.MuiEventTimelinePremium-eventDialogContent	eventDialogContent	Styles applied to the event dialog content element.
.MuiEventTimelinePremium-eventDialogDateTimeContainer	eventDialogDateTimeContainer	Styles applied to the event dialog date time container element.
.MuiEventTimelinePremium-eventDialogDateTimeFieldsContainer	eventDialogDateTimeFieldsContainer	Styles applied to the event dialog date time fields container element.
.MuiEventTimelinePremium-eventDialogDateTimeFieldsRow	eventDialogDateTimeFieldsRow	Styles applied to the event dialog date time fields row element.
.MuiEventTimelinePremium-eventDialogDateTimeIcon	eventDialogDateTimeIcon	Styles applied to the event dialog date time icon element.
.MuiEventTimelinePremium-eventDialogDateTimeLabel	eventDialogDateTimeLabel	Styles applied to the event dialog date time label element.
.MuiEventTimelinePremium-eventDialogDeleteButton	eventDialogDeleteButton	Styles applied to the event dialog delete button element.
.MuiEventTimelinePremium-eventDialogDescriptionLabel	eventDialogDescriptionLabel	Styles applied to the event dialog description label element.
.MuiEventTimelinePremium-eventDialogEndsRadioGroup	eventDialogEndsRadioGroup	Styles applied to the event dialog ends radio group element.
.MuiEventTimelinePremium-eventDialogForm	eventDialogForm	Styles applied to the event dialog form element.
.MuiEventTimelinePremium-eventDialogFormActions	eventDialogFormActions	Styles applied to the event dialog form actions element.
.MuiEventTimelinePremium-eventDialogFormDivider	eventDialogFormDivider	Styles applied to the event dialog form divider element.
.MuiEventTimelinePremium-eventDialogFrequencySelect	eventDialogFrequencySelect	Styles applied to the event dialog frequency select element.
.MuiEventTimelinePremium-eventDialogHeader	eventDialogHeader	Styles applied to the event dialog header element.
.MuiEventTimelinePremium-eventDialogInlineRow	eventDialogInlineRow	Styles applied to the event dialog inline row element.
.MuiEventTimelinePremium-eventDialogPaper	eventDialogPaper	Styles applied to the event dialog paper element.
.MuiEventTimelinePremium-eventDialogRadioButtonLabel	eventDialogRadioButtonLabel	Styles applied to the event dialog radio button label element.
.MuiEventTimelinePremium-eventDialogReadonlyContent	eventDialogReadonlyContent	Styles applied to the event dialog readonly content element.
.MuiEventTimelinePremium-eventDialogRecurrenceIcon	eventDialogRecurrenceIcon	Styles applied to the event dialog recurrence icon element.
.MuiEventTimelinePremium-eventDialogRecurrenceLabel	eventDialogRecurrenceLabel	Styles applied to the event dialog recurrence label element.
.MuiEventTimelinePremium-eventDialogRecurrenceLabelContainer	eventDialogRecurrenceLabelContainer	Styles applied to the event dialog recurrence label container element in the readonly content.
.MuiEventTimelinePremium-eventDialogRecurrenceSelectorContainer	eventDialogRecurrenceSelectorContainer	Styles applied to the event dialog recurrence selector container element.
.MuiEventTimelinePremium-eventDialogRecurrenceSelectorToggleGroup	eventDialogRecurrenceSelectorToggleGroup	Styles applied to the event dialog recurrence selector toggle group element.
.MuiEventTimelinePremium-eventDialogRepeatSectionContent	eventDialogRepeatSectionContent	Styles applied to the event dialog repeat section content element.
.MuiEventTimelinePremium-eventDialogRepeatSectionFieldset	eventDialogRepeatSectionFieldset	Styles applied to the event dialog repeat section fieldset element.
.MuiEventTimelinePremium-eventDialogRepeatSectionLabel	eventDialogRepeatSectionLabel	Styles applied to the event dialog repeat section label element.
.MuiEventTimelinePremium-eventDialogResourceContainer	eventDialogResourceContainer	Styles applied to the event dialog resource container element.
.MuiEventTimelinePremium-eventDialogResourceLegendColor	eventDialogResourceLegendColor	Styles applied to the event dialog resource legend color element.
.MuiEventTimelinePremium-eventDialogResourceLegendContainer	eventDialogResourceLegendContainer	Styles applied to the event dialog resource legend container element.
.MuiEventTimelinePremium-eventDialogResourceMenuColorDot	eventDialogResourceMenuColorDot	Styles applied to the event dialog resource menu color dot element.
.MuiEventTimelinePremium-eventDialogResourceMenuColorRadioButton	eventDialogResourceMenuColorRadioButton	Styles applied to the event dialog resource menu color radio button element.
.MuiEventTimelinePremium-eventDialogResourceMenuItem	eventDialogResourceMenuItem	Styles applied to the event dialog resource menu item element.
.MuiEventTimelinePremium-eventDialogResourceMenuListSubheader	eventDialogResourceMenuListSubheader	Styles applied to the event dialog resource menu list subheader element.
.MuiEventTimelinePremium-eventDialogResourceTitle	eventDialogResourceTitle	Styles applied to the event dialog resource title element.
.MuiEventTimelinePremium-eventDialogSaveButton	eventDialogSaveButton	Styles applied to the event dialog save button element.
.MuiEventTimelinePremium-eventDialogSectionHeaderTitle	eventDialogSectionHeaderTitle	Styles applied to the event dialog section header title element.
.MuiEventTimelinePremium-eventDialogSmallNumberField	eventDialogSmallNumberField	Styles applied to the event dialog small number field element.
.MuiEventTimelinePremium-eventDialogTab	eventDialogTab	Styles applied to the event dialog tab elements.
.MuiEventTimelinePremium-eventDialogTabContent	eventDialogTabContent	Styles applied to the event dialog tab content element.
.MuiEventTimelinePremium-eventDialogTabPanel	eventDialogTabPanel	Styles applied to the event dialog tab panel element.
.MuiEventTimelinePremium-eventDialogTabsContainer	eventDialogTabsContainer	Styles applied to the event dialog tabs container element.
.MuiEventTimelinePremium-eventDialogTitle	eventDialogTitle	Styles applied to the event dialog title element.
.MuiEventTimelinePremium-eventDialogWeekDaySelectorCheckbox	eventDialogWeekDaySelectorCheckbox	Styles applied to the event dialog week day selector form group element.
.MuiEventTimelinePremium-eventLinesClamp	eventLinesClamp	Styles applied to event lines clamp elements.
.MuiEventTimelinePremium-eventPlaceholder	eventPlaceholder	Styles applied to event placeholder elements.
.MuiEventTimelinePremium-eventResizeHandler	eventResizeHandler	Styles applied to event resize handler elements.
.MuiEventTimelinePremium-eventsHeaderCell	eventsHeaderCell	Styles applied to the events header cell element.
.MuiEventTimelinePremium-eventsHeaderCellContent	eventsHeaderCellContent	Styles applied to the events header cell content element.
.MuiEventTimelinePremium-eventsSubGrid	eventsSubGrid	Styles applied to the events sub-grid element.
.MuiEventTimelinePremium-eventsSubGridRow	eventsSubGridRow	Styles applied to the events sub-grid row element.
.MuiEventTimelinePremium-eventsSubGridWrapper	eventsSubGridWrapper	Styles applied to the events sub-grid wrapper element.
.MuiEventTimelinePremium-grid	grid	Styles applied to the grid element.
.MuiEventTimelinePremium-headerRow	headerRow	Styles applied to the header row element.
.MuiEventTimelinePremium-monthsHeader	monthsHeader	Styles applied to the months header root element.
.MuiEventTimelinePremium-monthsHeaderMonthLabel	monthsHeaderMonthLabel	Styles applied to months header month label elements.
.MuiEventTimelinePremium-monthsHeaderYearLabel	monthsHeaderYearLabel	Styles applied to months header year label elements.
.MuiEventTimelinePremium-root	root	Styles applied to the root element.
.MuiEventTimelinePremium-timeHeader	timeHeader	Styles applied to the time header root element.
.MuiEventTimelinePremium-timeHeaderCell	timeHeaderCell	Styles applied to time header cell elements.
.MuiEventTimelinePremium-timeHeaderCellsRow	timeHeaderCellsRow	Styles applied to the time header cells row element.
.MuiEventTimelinePremium-timeHeaderDayLabel	timeHeaderDayLabel	Styles applied to the time header day label element.
.MuiEventTimelinePremium-timeHeaderTimeCell	timeHeaderTimeCell	Styles applied to time header time cell elements.
.MuiEventTimelinePremium-timeHeaderTimeLabel	timeHeaderTimeLabel	Styles applied to time header time label elements.
.MuiEventTimelinePremium-titleCell	titleCell	Styles applied to the title cell element.
.MuiEventTimelinePremium-titleCellLegendColor	titleCellLegendColor	Styles applied to the title cell legend color element.
.MuiEventTimelinePremium-titleCellRow	titleCellRow	Styles applied to the title cell row element.
.MuiEventTimelinePremium-titleHeaderCell	titleHeaderCell	Styles applied to the title header cell element.
.MuiEventTimelinePremium-titleSubGrid	titleSubGrid	Styles applied to the title sub-grid element.
.MuiEventTimelinePremium-weeksHeader	weeksHeader	Styles applied to the weeks header root element.
.MuiEventTimelinePremium-weeksHeaderCell	weeksHeaderCell	Styles applied to weeks header cell elements.
.MuiEventTimelinePremium-weeksHeaderDayCell	weeksHeaderDayCell	Styles applied to weeks header day cell elements.
.MuiEventTimelinePremium-weeksHeaderDayLabel	weeksHeaderDayLabel	Styles applied to weeks header day label elements.
.MuiEventTimelinePremium-weeksHeaderDaysRow	weeksHeaderDaysRow	Styles applied to the weeks header days row element.
.MuiEventTimelinePremium-yearsHeader	yearsHeader	Styles applied to the years header root element.
.MuiEventTimelinePremium-yearsHeaderYearLabel	yearsHeaderYearLabel	Styles applied to years header year label elements.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.