Components / Scheduler / API / SchedulerEditItemProps /

SchedulerEditItemProps

Represents the props of the KendoReact SchedulerEditItem 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.
drag?	`React.ComponentType<SchedulerDragProps>`	Overrides the default component responsible for visualizing the `dragItem`. The default Component is: SchedulerDrag.
dragHint?	`boolean`	Specifies if the current SchedulerItem is used as a DragHint.
dragItem?	`any`	Setting this property will force the `dragItem` to be in controlled state, allowing further customization.
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.
form?	`React.ComponentType<SchedulerFormProps>`	Overrides the default component responsible for visualizing the `formItem`. The default Component is: SchedulerForm.
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.
formItem?	`any`	Setting this property will force the `formItem` to be in controlled state, allowing further customization.
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`.
item?	`React.ComponentType<SchedulerItemProps>`	Overrides the default component responsible for visualizing a single item. The default Component is: SchedulerItem.
itemRef	`React.RefObject<undefined>`	Represents the `ref` of the actual `item`.
occurrenceDialog?	`React.ComponentType<SchedulerOccurrenceDialogProps>`	Overrides the default component responsible for the selection between `occurrence` and `series` edit. The default Component is: SchedulerOccurrenceDialog.
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.
removeDialog?	`React.ComponentType<SchedulerRemoveDialogProps>`	Overrides the default component responsible for visualizing the `removeItem` and confirming the `remove` action. The default Component is: SchedulerRemoveDialog.
removeItem?	`any`	Setting this property will force the `removeItem` to be in controlled state, allowing further customization. Specifies the DataItem which should be removed from the `data` set. The `removeItem` is passed as property to the `removeDialog` and `occurrenceDialog` component;
resize?	`React.ComponentType<SchedulerResizeProps>`	Overrides the default component responsible for visualizing the `resizeItem`. The default Component is: SchedulerResize.
resizeHint?	`boolean`	Specifies if the current SchedulerItem is used as a ResizeHint.
resizeItem?	`any`	Setting this property will force the `resizeItem` to be in controlled state, allowing further customization.
selected?	`boolean`	Sets the selected state of the SchedulerSlot. By default the `k-selected` className is added if `props.selected` is `true`.
series?	`"null" \| boolean`	Indicates if the editing should be applied to the whole `series` or to a single `occurrence` when the item is recurring. By default, the `series` prop is set to `null` and additional selection is done through the `occurrence` dialog. If set ot either `true` or `false`: `true` — indicates that the editing should always be applied to the whole `series` `false` — indicates that the editing should always be applied to a single `occurrence`.
showOccurrenceDialog?	`boolean`	Setting this property will force the `showOccurrenceDialog` to be in controlled state, allowing further control over the display of the `occurrenceDialog` component.
showRemoveDialog?	`boolean`	Setting this property will force the `showRemoveDialog` to be in controlled state, allowing further control over the display of the `removeDialog` component.
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.
viewItem?	`React.ComponentType<SchedulerViewItemProps>`	Overrides the default component responsible for positioning the item inside the view. The default Component is: SchedulerViewItem.
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`

onBlurAction

An action callback. Used to define the component behavior on blur.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemFocusEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onCancel

Called whenever the current edit is canceled.

Parameters
event	`SchedulerFormStateChangeEvent<null> \| SchedulerOccurrenceDialogStateChangeEvent<null>`

onCancelAction

An action callback. Used to define the component behavior on cancel.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerFormStateChangeEvent<null> \| SchedulerOccurrenceDialogStateChangeEvent<null>`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onClick

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

Parameters
event	`SchedulerItemMouseEvent`

onClickAction

An action callback. Used to define the component behavior on click.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemMouseEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onDataAction

Called when the item has been removed or manipulated though dragging, resizing or an external form.

Parameters
action	`DataAction`
event?	`any`

onDoubleClick

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

Parameters
event	`SchedulerItemMouseEvent`

onDoubleClickAction

An action callback. Used to define the component behavior on double click.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemMouseEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onDragAction

An action callback. Used to define the component behavior on drag.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onDragItemChange

Called every time the dragItem changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<any>`

onFocus

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

Parameters
event	`SchedulerItemFocusEvent`

onFocusAction

An action callback. Used to define the component behavior on focus.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemFocusEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onFormItemChange

Called every time the formItem changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<any>`

onFormSubmit

Called whenever the form is submitted.

Parameters
event	`SchedulerFormStateChangeEvent<any>`

onFormSubmitAction

An action callback. Used to define the component behavior on form submit.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerFormStateChangeEvent<any>`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onKeyDown

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

Parameters
event	`SchedulerItemKeyboardEvent`

onKeyDownAction

An action callback. Used to define the component behavior on key down.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemKeyboardEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onKeyUpAction

An action callback. Used to define the component behavior on key up.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemKeyboardEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onMouseDown

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

Parameters
event	`SchedulerItemMouseEvent`

onMouseDownAction

An action callback. Used to define the component behavior on mouse down.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemMouseEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onMouseUpAction

An action callback. Used to define the component behavior on mouse up.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemMouseEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onOccurrenceClick

Called whenever the occurence option is selected from the OccurrenceDialog.

Parameters
event	`SchedulerOccurrenceDialogStateChangeEvent<any>`

onOccurrenceClickAction

An action callback. Used to define the component behavior on occurrence click.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerOccurrenceDialogStateChangeEvent<any>`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onPressAction

An action callback. Used to define the component behavior on press.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onReleaseAction

An action callback. Used to define the component behavior on release.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onRemoveClickAction

An action callback. Used to define the component behavior on remove click.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemMouseEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onRemoveConfirm

Called whenever the confirm option is selected from the RemoveDialog.

Parameters
event	`SchedulerRemoveDialogStateChangeEvent<any>`

onRemoveConfirmAction

An action callback. Used to define the component behavior on remove confirm click.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerRemoveDialogStateChangeEvent<any>`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onRemoveItemChange

Called every time the removeItem changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<any>`

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`

onResizeEndDragAction

An action callback. Used to define the component behavior on resize end drag.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onResizeItemChange

Called every time the resize changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<any>`

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`

onResizePressAction

An action callback. Used to define the component behavior on resize press.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onResizeReleaseAction

An action callback. Used to define the component behavior on resize release.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

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`

onResizeStartDragAction

An action callback. Used to define the component behavior on resize start drag.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerItemDragEvent`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onSeriesChange

Called every time the series changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<undefined>`

onSeriesClick

Called whenever the series option is selected from the OccurrenceDialog.

Parameters
event	`SchedulerOccurrenceDialogStateChangeEvent<any>`

onSeriesClickAction

An action callback. Used to define the component behavior on series click.

Internal state change will be triggered depending on the specific action types.

Parameters
event	`SchedulerOccurrenceDialogStateChangeEvent<any>`
props	`SchedulerEditItemProps`
state	`SchedulerEditItemState`

Returns
`SchedulerEditItemAction \| SchedulerEditItemAction[]`

onShowOccurrenceDialogChange

Called every time the showOccurrenceDialog changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<boolean>`

onShowRemoveDialogChange

Called every time the showRemoveDialog changes.

Parameters
event	`SchedulerEditItemStateChangeEvent<boolean>`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

SchedulerEditItemProps

In this article

Not finding the help you need?