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[]		Specify the available view components as children and the Scheduler will match the currently selected view and render 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. The defaultDate property is used to specify the initial rendered date, while still 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		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, the editTask is being used in the AgendaView only. 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		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. Specifying the item property of a specific view will override 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		The names of the model fields from which the Scheduler will read its data (see example). jsx const modelFields = { id: 'TaskID', start: 'Start', end: 'End' }; <Scheduler modelFields={modelFields} />
onDataChange?	(event: SchedulerDataChangeEvent) => void		Called each time when 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		Called when new date is selected. jsx const handleDateChange = (args) => console.log(args.value); <Scheduler onDateChange={handleDateChange} />
onViewChange?	(args: SchedulerViewChangeEvent) => void		Called when new view is selected. (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		Force a 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		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, the task is being used in the AgendaView only. 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		Specifies the id of the timezone that will be displayed in the Scheduler. For example, Europe/Sofia. Defaults to Etc/UTC. 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. Specifying the viewItem property of a specific view will override 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, the viewTask is being used in the AgendaView only. 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} />