StandaloneDayView API

API reference docs for the React StandaloneDayView 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:

Event Calendar - Views

Import

import { StandaloneDayView } from '@mui/x-scheduler/day-view';
// or
import { StandaloneDayView } from '@mui/x-scheduler';

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

A Day View that can be used outside of the Event Calendar.

Props

Props of the native component are also available.

Name	Type	Default	Description
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.
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, isSidePanelOpen?: bool, showEmptyDaysInAgenda?: bool, showWeekends?: bool, showWeekNumber?: bool }	{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }	The default preferences for the calendar. To use controlled preferences, use the `preferences` prop.
defaultView	'agenda' \| 'day' \| 'month' \| 'week'	"week"	The view initially displayed in the calendar. To render a controlled calendar, 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.
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, isSidePanelOpen?: bool, showEmptyDaysInAgenda?: bool, showWeekends?: bool, showWeekNumber?: bool }	-	Preferences currently displayed in the calendar.
preferencesMenuConfig	false \| { toggleAmpm?: bool, toggleEmptyDaysInAgenda?: bool, toggleWeekendVisibility?: bool, toggleWeekNumberVisibility?: bool }	{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }	Config of the preferences menu. Defines which options are visible in the menu. If `false`, the menu will be entirely hidden.
readOnly	bool	false	Whether the calendar is in read-only mode.
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	'agenda' \| 'day' \| 'month' \| 'week'	-	The view currently displayed in the calendar.
views	Array<'agenda' \| 'day' \| 'month' \| 'week'>	["day", "week", "month", "agenda"]	The views available in the calendar.
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.

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.