EventCalendar API

The ref object that allows Event Calendar manipulation. Can be instantiated with useEventCalendarApiRef().

Whether the event can be dragged to change its start and end dates without changing the duration.

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.

Whether events can be dragged from outside of the calendar and dropped into it.

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.

Override or extend the styles applied to the component.

See CSS classes API below for more details.

Data source for fetching events asynchronously. When provided, events are fetched through the data source instead of the events prop.

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.

The default preferences for the calendar. To use controlled preferences, use the preferences prop.

The view initially displayed in the calendar. To render a controlled calendar, use the view prop.

The date initially used to determine the visible date range in each view. To render a controlled calendar, use the visibleDate prop.

The IDs of the resources initially visible. To render a controlled scheduler, use the visibleResources prop.

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.

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.

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.

The events currently available in the calendar.

Set the locale text of the Event Calendar. You can find all the translation keys supported in the source in the GitHub repository.

Callback fired when some event of the calendar change.

Event handler called when the preferences change.

Event handler called when the view changes.

Event handler called when the visible date changes.

Event handler called when the visible resources change.

Preferences currently displayed in the calendar.

Config of the preferences menu. Defines which options are visible in the menu. If false, the menu will be entirely hidden.

Whether the calendar is in read-only mode.

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.

The resources the events can be assigned to.

Whether the component should display the current time indicator.

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

The view currently displayed in the calendar.

The views available in the calendar.

The date currently used to determine the visible date range in each view.

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.