Scheduler / API / SchedulerItemProps

SchedulerItemProps

Represents the props of the KendoReact SchedulerItem component.

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 SchedulerSlot applies the following default className:

k-event
k-state-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 DataItem

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 string | null

The description of the item.

dragHint? boolean

Specifies if the current SchedulerItem is used as a DragHint.

editable? EditableProp | boolean

Overrides the editable prop of the Scheduler and the active view.

end Date

The end date of the item.

endTimezone string | null

The timezone name for the end date.

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.

onBlur? (event: SchedulerItemFocusEvent) => void

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

onClick? (event: SchedulerItemMouseEvent) => void

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

onDoubleClick? (event: SchedulerItemMouseEvent) => void

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

onDrag? (event: SchedulerItemDragEvent) => void

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.

onFocus? (event: SchedulerItemFocusEvent) => void

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

onKeyDown? (event: SchedulerItemKeyboardEvent) => void

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

onKeyPress? (event: SchedulerItemKeyboardEvent) => void

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

onKeyUp? (event: SchedulerItemKeyboardEvent) => void

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

onPress? (event: SchedulerItemDragEvent) => void

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.

onRelease? (event: SchedulerItemDragEvent) => void

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.

onRemoveClick? (event: SchedulerItemMouseEvent) => void

Called when the delete icon is clicked.

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

onResizeEndDrag? (event: SchedulerItemDragEvent) => void

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.

onResizePress? (event: SchedulerItemDragEvent) => void

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.

onResizeRelease? (event: SchedulerItemDragEvent) => void

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.

onResizeStartDrag? (event: SchedulerItemDragEvent) => void

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.

order number | null

Represents the order of the item among its siblings.

originalStart Date | null

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-state-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 string | null

The timezone name for the start date.

style? 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