SchedulerProps

Premium

Represents the props of the KendoReact Scheduler component.

Name	Type	Default	Description
ariaLabel?	string		The aria-label attribute to be applied to the Scheduler component. For more information, refer to the Scheduler Accessibility Compliance article. jsx <Scheduler ariaLabel="Scheduler component" />
ariaLabelledby?	string		The aria-labelledby attribute to be applied to the Scheduler component. For more information, refer to the Scheduler Accessibility Compliance article. jsx <Scheduler ariaLabelledby="scheduler-label" />
children?	SchedulerView | SchedulerView[]		Specifies the available view components as children. The Scheduler matches the currently selected view and renders it. jsx <Scheduler> <DayView /> <WeekView /> </Scheduler>
className?	string		Specifies the className attribute of the wrapping element of the Scheduler. jsx <Scheduler className="custom-scheduler" />
data?	any[]		Sets the data of the Scheduler component. The data is then parsed and rendered as visual Scheduler items. jsx const data = [{ id: 1, title: 'Event', start: new Date(), end: new Date() }]; <Scheduler data={data} />
date?	Date		Sets the current selected Date. The current selected date is passed to the selected view and transformed into a range. jsx <Scheduler date={new Date()} />
defaultDate?	Date		Sets a default selected Date. Use the defaultDate property to specify the initial rendered date while remaining in an uncontrolled mode. jsx <Scheduler defaultDate={new Date()} />
defaultView?	string		Sets the initially selected view. For more information refer to the Scheduler Views article. Sets the initially selected view. The available values are: day week month agenda timeline jsx <Scheduler defaultView="week" />
editable?	boolean | EditableProp	false	Sets if the Scheduler component is editable. The value can be either a boolean or an Object to specify different types of editing. jsx <Scheduler editable={true} />
editItem?	React.ComponentType<SchedulerEditItemProps>		Overrides the default editItem. Specifying the editItem property of a specific view will override this property. The default component is: SchedulerEditItem. For more information on customizing the scheduler items, refer to the Item Customization article. jsx const CustomEditItem = (props) => <div>{props.title}</div>; <Scheduler editItem={CustomEditItem} />
editSlot?	React.ComponentType<SchedulerEditSlotProps>		Overrides the default editSlot component. Specifying the editSlot property of a specific view will override this property. The default component is: SchedulerEditSlot. For more information on customizing the scheduler slots, refer to the Slot Customization article. jsx const CustomEditSlot = (props) => <div>{props.title}</div>; <Scheduler editSlot={CustomEditSlot} />
editTask?	React.ComponentType<SchedulerTaskProps>		Overrides the default editTask. Specifying the editTask property of a specific view will override this property. Currently, only the AgendaView uses the editTask. The default component is: SchedulerEditTask. For more information on customizing the scheduler tasks, refer to the Task Customization article. jsx const CustomEditTask = (props) => <div>{props.title}</div>; <Scheduler editTask={CustomEditTask} />
footer?	React.ComponentType<SchedulerFooterProps>		Overrides the default footer component of the Scheduler. The default component is: SchedulerFooter. For more information on customizing the scheduler footer, refer to the Footer Customization article. jsx const CustomFooter = (props) => <div>Custom Footer</div>; <Scheduler footer={CustomFooter} />
group?	SchedulerGroup		Specifies the groups of the Scheduler. jsx const group = { resources: ['Rooms'], orientation: 'horizontal' }; <Scheduler group={group} />
header?	React.ComponentType<SchedulerHeaderProps>		Overrides the default header component of the Scheduler. The default component is: SchedulerHeader. For more information on customizing the scheduler header, refer to the Header Customization article. jsx const CustomHeader = (props) => <div>Custom Header</div>; <Scheduler header={CustomHeader} />
height?	string | number	600	Sets the height of the Scheduler. jsx <Scheduler height={600} />
id?	string		Specifies the id of the wrapping element of the Scheduler. jsx <Scheduler id="my-scheduler" />
item?	React.ComponentType<SchedulerItemProps>		Overrides the default item. If you specify the item property of a specific view, it overrides this property. The default component is: SchedulerItem. For more information on customizing the scheduler items, refer to the Item Customization article. jsx const CustomItem = (props) => <div>{props.title}</div>; <Scheduler item={CustomItem} />
modelFields?	SchedulerModelFields		Specifies the names of the model fields from which the Scheduler reads its data (see example). jsx const modelFields = { id: 'TaskID', start: 'Start', end: 'End' }; <Scheduler modelFields={modelFields} />
onDataChange?	(event: SchedulerDataChangeEvent) => void		Fires each time editing occurs. To enable editing set the editable property to true or an EditableProp. For more information refer to the Scheduler Editing article. jsx const handleDataChange = (event) => console.log(event); <Scheduler onDataChange={handleDataChange} />
onDateChange?	(args: SchedulerDateChangeEvent) => void		Fires when the user selects a new date. jsx const handleDateChange = (args) => console.log(args.value); <Scheduler onDateChange={handleDateChange} />
onViewChange?	(args: SchedulerViewChangeEvent) => void		Fires when the user selects a new view. (see example). jsx const handleViewChange = (args) => console.log(args.value); <Scheduler onViewChange={handleViewChange} />
resources?	SchedulerResource[]		Specifies the resources of the Scheduler. jsx const resources = [{ name: 'Rooms', data: [{ text: 'Room 1', value: 1 }] }]; <Scheduler resources={resources} />
role?	string		Specifies the role attribute of the Scheduler wrapping element. For more information, refer to the Scheduler Accessibility Compliance article. jsx <Scheduler role="application" />
rtl?	boolean		Forces RTL mode. For more information refer to RTL Support. jsx <Scheduler rtl={true} />
slot?	React.ComponentType<SchedulerSlotProps>		Overrides the default slot component. Specifying the slot property of a specific view will override this property. The default component is: SchedulerSlot. For more information on customizing the scheduler slots, refer to the Slot Customization article. jsx const CustomSlot = (props) => <div>{props.title}</div>; <Scheduler slot={CustomSlot} />
style?	React.CSSProperties		Specifies the style object of the wrapping element of the Scheduler. jsx <Scheduler style={{ height: '500px' }} />
tabIndex?	number	-1	Specifies the tabIndex attribute of the wrapping element of the Scheduler. jsx <Scheduler tabIndex={0} />
task?	React.ComponentType<SchedulerTaskProps>		Overrides the default task. Specifying the task property of a specific view will override this property. Currently, only the AgendaView uses the task. The default component is: SchedulerTask. For more information on customizing the scheduler tasks, refer to the Task Customization article. jsx const CustomTask = (props) => <div>{props.title}</div>; <Scheduler task={CustomTask} />
timezone?	string	"Etc/UTC"	Specifies the id of the timezone that the Scheduler displays. For example, Europe/Sofia. jsx <Scheduler timezone="Europe/Sofia" />
view?	string		Sets the currently selected view. The value is matched with the name property of the view. Sets the initially selected view. The available values are: day week month agenda timeline jsx <Scheduler view="day" />
viewItem?	React.ComponentType<SchedulerViewItemProps>		Overrides the default viewItem. If you specify the viewItem property of a specific view, it overrides this property. The default component is: SchedulerViewItem. For more information on customizing the scheduler items, refer to the Item Customization article. jsx const CustomViewItem = (props) => <div>{props.title}</div>; <Scheduler viewItem={CustomViewItem} />
viewSlot?	React.ComponentType<SchedulerViewSlotProps>		Overrides the default viewSlot component. Specifying the viewSlot property of a specific view will override this property. The default component is: SchedulerViewSlot. For more information on customizing the scheduler slots, refer to the Slot Customization article. jsx const CustomViewSlot = (props) => <div>{props.title}</div>; <Scheduler viewSlot={CustomViewSlot} />
viewTask?	React.ComponentType<SchedulerTaskProps>		Overrides the default viewTask. Specifying the viewTask property of a specific view will override this property. Currently, only the AgendaView uses the viewTask. The default component is: SchedulerViewTask. For more information on customizing the scheduler tasks, refer to the Task Customization article. jsx const CustomViewTask = (props) => <div>{props.title}</div>; <Scheduler viewTask={CustomViewTask} />