What is KendoReact
Components
- Animation
- Barcodes
- Buttons
- Charts
- Common Utilitiesupdated
- Conversational UI
- Data Gridupdated
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdownsupdated
- Editor
- Excel Export
- File Saver
- Form
- Gantt
- Gauges
- Indicators
- Inputsupdated
- Labels
- Layoutupdated
- ListBox
- ListView
- Mapbeta
- Notification
- PDF Processing
- PDFViewernew
- PivotGrid
- Popup
- Progress Bars
- Ripple
- Scheduler
- - Overview
  - Getting Started
  - Views
  - Data Binding
  - Editing
  - Grouping
  - Resources
  - Customization
  - Adaptive Slot Height
  - Auto Item Height
  - Recurring Events
  - Date Selection
  - Timezones
  - Globalization
  - Keyboard Navigation
  - Context Providers
  - Accessibility
  - API
- ScrollView
- Sortable
- TaskBoard
- Tooltips
- TreeList
- TreeView
- Upload
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
Updates
Troubleshooting

Components / Scheduler / API / SchedulerItemProps /

SchedulerItemProps

Represents the props of the KendoReact SchedulerItem component.

Name	Type	Description
children?	`React.ReactNode`	Specifies the `children` of the SchedulerItem. Setting this property will override the default elements rendered by the SchedulerItem.
className?	`string`	Specifies the `className` attribute of the wrapping element of the SchedulerItem. The SchedulerItem applies the following default className: `k-event` `k-selected` - if `props.selected` is set to `true` `k-event-drag-hint` - if `props.dragHint` is set to `true` `k-scheduler-marquee` - if `props.resizeHint` is set to `true` `k-marquee`: if `props.resizeHint` is set to `true` `k-first`: if `props.resizeHint` is set to `true` and `props.tail` is set to `false` `k-last`: if `props.resizeHint` is set to `true` and `props.head` is set to `false`
dataItem	`any`	Represents the original `DataItem` from which the item was created. For more information about the `data` collection, refer to the Scheduler Data Binding article.
description	`"null" \| string`	The `description` of the item.
dragHint?	`boolean`	Specifies if the current SchedulerItem is used as a DragHint.
editable?	`boolean \| EditableProp`	Overrides the `editable` prop of the `Scheduler` and the active view.
end	`Date`	The `end` date of the item.
endTimezone	`"null" \| string`	The timezone name for the `end` date.
format?	`string`	Specifies the `format` in which the `zonedStart` and `zonedEnd` properties are displayed. For more information, refer to the formatDate method of the IntlService.
group	`Group`	Represents the current group in which the item is rendered.
head	`boolean`	Represents if the `end` of the item is outside the current visual range.
id?	`string`	Specifies the `id` of the wrapping element of the SchedulerItem.
isAllDay	`boolean`	Represents if the item durations is through the whole day.
isException	`boolean`	Represents if the item is an exception to a recurrence rule.
isRecurring	`boolean`	Represents if the item is a single occurrence of a recurring `DataItem`.
itemRef	`React.RefObject<undefined>`	Represents the `ref` of the actual `item`.
order	`"null" \| number`	Represents the order of the item among its siblings.
originalStart	`"null" \| Date`	Represents the original start of the item. This property is being used when only a single occurrence of a recurring item is being edited.
range	`Range`	Represents the current range in which the item is rendered.
resizeHint?	`boolean`	Specifies if the current SchedulerItem is used as a ResizeHint.
selected?	`boolean`	Sets the selected state of the SchedulerSlot. By default the `k-selected` className is added if `props.selected` is `true`.
slots	`Slot[]`	A collection of all `slots` in which the current item fits.
start	`Date`	The `start` date of the item.
startTimezone	`"null" \| string`	The timezone name for the `start` date.
style?	`React.CSSProperties`	Specifies the `style` object of the wrapping element of the SchedulerItem. The SchedulerItem applies the following default styles: `cursor`: `pointer` `userSelect`: `none` `borderColor`: `props.color` `borderColor`: `props.color` `pointerEvents`: `none` - if `props.dragHint` or `props.resizeHint` is set to `true`
tabIndex?	`"null" \| number`	Specifies the `tabIndex` attribute of the wrapping element of the SchedulerItem. Providing `null` will not apply any `tabIndex` to the element.
tail	`boolean`	Represents if the `start` of the item is outside the current visual range.
title	`"null" \| string`	The `title` of the item.
vertical?	`boolean`	Specifies the orientation of the SchedulerItem.
zonedEnd	`ZonedDate`	Represents the `end` Date in the provided timezone. For more information about timezones, refer to the Scheduler TImezones article.
zonedStart	`ZonedDate`	Represents the `start` Date in the provided timezone. For more information about timezones, refer to the Scheduler TImezones article.

Methods

onBlur

Called each time the element, or any of its child elements, lose focus.

Parameters
event	`SchedulerItemFocusEvent`

onClick

Called each time the element, or any of its child elements, is clicked.

Parameters
event	`SchedulerItemMouseEvent`

onDoubleClick

Called each time the element, or any of its child elements, is double-clicked.

Parameters
event	`SchedulerItemMouseEvent`

onDrag

Called each time the element is dragged.

This event is used by the Drag & Drop functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDrag callback.

Parameters
event	`SchedulerItemDragEvent`

onFocus

Called each time the element, or any of its child elements, receive focus.

Parameters
event	`SchedulerItemFocusEvent`

onKeyDown

Called each time a keydown event propagates to the wrapping element.

Parameters
event	`SchedulerItemKeyboardEvent`

onKeyPress

Called each time a keypress event propagates to the wrapping element.

Parameters
event	`SchedulerItemKeyboardEvent`

onKeyUp

Called each time a keyup event propagates to the wrapping element.

Parameters
event	`SchedulerItemKeyboardEvent`

onMouseDown

Called each time the element, or any of its child elements resceives mousedown event.

Parameters
event	`SchedulerItemMouseEvent`

onMouseEnter

Called each time the element, or any of its child elements receives mouseenter event.

Parameters
event	`SchedulerItemMouseEvent`

onMouseLeave

Called each time the element, or any of its child elements receives mouseleave event.

Parameters
event	`SchedulerItemMouseEvent`

onMouseOut

Called each time the element, or any of its child elements receives mouseout event.

Parameters
event	`SchedulerItemMouseEvent`

onMouseOver

Called each time the element, or any of its child elements receives mouseover event.

Parameters
event	`SchedulerItemMouseEvent`

onMouseUp

Called each time the element, or any of its child elements resceives mouseup event.

Parameters
event	`SchedulerItemMouseEvent`

onPress

Called each time the element receives a press event.

This event is used by the Drag & Drop functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDragStart callback.

Parameters
event	`SchedulerItemDragEvent`

onRelease

Called when the dragged element is being released.

This event is used by the Drag & Drop functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDragEnd callback.

Parameters
event	`SchedulerItemDragEvent`

onRemoveClick

Called when the delete icon is clicked.

The delete icon is rendered only when props.editable or props.editable.remove is true

Parameters
event	`SchedulerItemMouseEvent`

onResizeEndDrag

Called each time the the resize handler responsible for the item end is being dragged.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDrag callback.

Parameters
event	`SchedulerItemDragEvent`

onResizePress

Called each time the any of the resize handlers receives a press event.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDragStart callback.

Parameters
event	`SchedulerItemDragEvent`

onResizeRelease

Called when the dragged resize handler is being released

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDragEnd callback.

Parameters
event	`SchedulerItemDragEvent`

onResizeStartDrag

Called each time the the resize handler responsible for the item start is being dragged.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem is using the KendoReactDraggable instead of the onDrag callback.

Parameters
event	`SchedulerItemDragEvent`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

SchedulerItemProps

In this article

Not finding the help you need?