React-Mui-Scheduler

Configuration

Options

Name	Type	Default	Description	Values
transitionMode	TransitionMode	`TransitionMode.ZOOM`	This option is used to define the type of scheduler transition	TransitionMode.ZOOM TransitionMode.FADE TransitionMode.SLIDE
startWeekOn	StartWeek	`StartWeek.MON`	This option is used to set the start of the calendar week to Monday or Sunday	StartWeek.MON StartWeek.SUN
defaultMode	Mode	`Mode.WEEK`	This option allows you to define the type of view to display	Mode.MONTH Mode.WEEK Mode.DAY Mode.TIMELINE
minWidth	number	`540`	This option allows you to define the minimum width of the container
maxWidth	number	`540`	This option allows you to define the maximum width of the container
minHeight	number	`540`	This option allows you to define the minimum height of the container
maxHeight	number	`540`	This option allows you to define the maximum height of the container
reverseTimelineOrder	boolean	`false`	This option allows you to define the order of events displayed in Timeline view	false true

Props

Name	Type	Default	Description	Values
locale	string	`enUS`	This prop is used to set the locale of the scheduler	ar br de enUS es fr ja ko zh
events	Event[]		This prop sets event data
legacyStyle	boolean	`false`	This prop allows to use the old display style	false true
options	Option		This prop is used to set scheduler properties
alertProps	AlertProps		This prop is used to set scheduler properties
toolbarProps	ToolbarProps		This prop is used to set toolbar properties
onEventsChange	event		This event is fired when the event change occurs
onCellClick	event		This event is fired when a cell is clicked
onTaskClick	event		This event is fired when a task is clicked
onAlertCloseButtonClicked	event		This event is fired when the close button of the alert component
onDateChange	event		This event is fired when a date from the DatePicker is clicked

Alert props

Name	Type	Default	Description	Values
open	boolean	`true`	This option opens the notification Alert component	false true
color	AlertColor	`info`	Alert notification color	info success warning error
severity	AlertColor	`info`	Alert notification severity	info success warning error
message	string	`🚀 Let's start with awesome react-mui-scheduler 🔥 🔥 🔥`	Alert notification message to display
showActionButton	boolean	`true`	This option displays or not the action button on the Alert	false true
showNotification	boolean	`true`	This option allows to display or not a notification when data change	false true
delay	number	`1500`	This option allows you to define the display delay in milliseconds of the Alert

Toolbar props

Name	Type	Default	Description	Values
showSearchBar	boolean	`true`	Show or hide the search bar	false true
showSwitchModeButtons.showMonthButton	boolean	`true`	Show or hide the view mode button month	false true
showSwitchModeButtons.showWeekButton	boolean	`true`	Show or hide the view mode button week	false true
showSwitchModeButtons.showDayButton	boolean	`true`	Show or hide the view mode button day	false true
showSwitchModeButtons.showTimelineButton	boolean	`true`	Show or hide the view mode button timeline	false true
showDatePicker	boolean	`true`	Show or hide the date picker buttons	false true

Events

Name	Params	Type	Description
onCellClick	`event: React.MouseEvent<HTMLTableCellElement, MouseEvent>, row: any, day: any`	Event	Triggered when clicking on a cell
onEventsChange	`item: Event`	Event	Triggered when clicking on an event
onAlertCloseButtonClicked	`event: React.MouseEvent<HTMLButtonElement>`	Event	Triggers when clicking on the close button of the notification alert
onTaskClick	`event: React.MouseEvent<HTMLDivElement, MouseEvent>, task: Event`	Event	Triggers when clicking on a task event
onDateChange	`day: number, date: number \| Date \| null`	Event	Triggers when clicking on a date from the DatePicker

Event interface

Name	Type	Required	Description
id	number \| string	`true`	Unique id for every event
label	string	`true`
color	string\|undefined	`false`	If not set, the primary color of the theme will be applied
groupLabel	string	`true`
startHour	string	`true`	Hour string format with `HH:mm aaa`
endHour	string	`true`	Hour string format with `HH:mm aaa`
date	string	`true`	Date string, must be formatted with `yyyy-MM-dd` date format
user	string\|undefined	`false`