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.
isLast?	`boolean`	Returns true if it is the last item rendered in the current view.
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.
onBlur?	`(event: SchedulerItemFocusEvent) => void`	Called each time the element, or any of its child elements, lose focus.
onBlurAction?	`(event: SchedulerItemFocusEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on blur. Internal state change will be triggered depending on the specific action types.
onCancel?	`(event: SchedulerFormStateChangeEvent<null> \| SchedulerOccurrenceDialogStateChangeEvent<null>) => void`	Called whenever the current edit is canceled.
onCancelAction?	`(event: SchedulerFormStateChangeEvent<null> \| SchedulerOccurrenceDialogStateChangeEvent<null>, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on cancel. Internal state change will be triggered depending on the specific action types.
onClick?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements, is clicked.
onClickAction?	`(event: SchedulerItemMouseEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on click. Internal state change will be triggered depending on the specific action types.
onDataAction?	`(action: DataAction, event?: any) => void`	Called when the item has been removed or manipulated though dragging, resizing or an external form.
onDoubleClick?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements, is double-clicked.
onDoubleClickAction?	`(event: SchedulerItemMouseEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on double click. Internal state change will be triggered depending on the specific action types.
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.
onDragAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on drag. Internal state change will be triggered depending on the specific action types.
onDragItemChange?	`(event: SchedulerEditItemStateChangeEvent<any>) => void`	Called every time the `dragItem` changes.
onFocus?	`(event: SchedulerItemFocusEvent) => void`	Called each time the element, or any of its child elements, receive focus.
onFocusAction?	`(event: SchedulerItemFocusEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on focus. Internal state change will be triggered depending on the specific action types.
onFormItemChange?	`(event: SchedulerEditItemStateChangeEvent<any>) => void`	Called every time the `formItem` changes.
onFormSubmit?	`(event: SchedulerFormStateChangeEvent<any>) => void`	Called whenever the `form` is submitted.
onFormSubmitAction?	`(event: SchedulerFormStateChangeEvent<any>, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on form submit. Internal state change will be triggered depending on the specific action types.
onKeyDown?	`(event: SchedulerItemKeyboardEvent) => void`	Called each time a `keydown` event propagates to the wrapping element.
onKeyDownAction?	`(event: SchedulerItemKeyboardEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on key down. Internal state change will be triggered depending on the specific action types.
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.
onKeyUpAction?	`(event: SchedulerItemKeyboardEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on key up. Internal state change will be triggered depending on the specific action types.
onMouseDown?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements resceives `mousedown` event.
onMouseDownAction?	`(event: SchedulerItemMouseEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on mouse down. Internal state change will be triggered depending on the specific action types.
onMouseEnter?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements receives `mouseenter` event.
onMouseLeave?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements receives `mouseleave` event.
onMouseOut?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements receives `mouseout` event.
onMouseOver?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements receives `mouseover` event.
onMouseUp?	`(event: SchedulerItemMouseEvent) => void`	Called each time the element, or any of its child elements resceives `mouseup` event.
onMouseUpAction?	`(event: SchedulerItemMouseEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on mouse up. Internal state change will be triggered depending on the specific action types.
onOccurrenceClick?	`(event: SchedulerOccurrenceDialogStateChangeEvent<any>) => void`	Called whenever the `occurence` option is selected from the `OccurrenceDialog`.
onOccurrenceClickAction?	`(event: SchedulerOccurrenceDialogStateChangeEvent<any>, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on occurrence click. Internal state change will be triggered depending on the specific action types.
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.
onPressAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on press. Internal state change will be triggered depending on the specific action types.
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.
onReleaseAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on release. Internal state change will be triggered depending on the specific action types.
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`
onRemoveClickAction?	`(event: SchedulerItemMouseEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on remove click. Internal state change will be triggered depending on the specific action types.
onRemoveConfirm?	`(event: SchedulerRemoveDialogStateChangeEvent<any>) => void`	Called whenever the `confirm` option is selected from the `RemoveDialog`.
onRemoveConfirmAction?	`(event: SchedulerRemoveDialogStateChangeEvent<any>, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	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.
onRemoveItemChange?	`(event: SchedulerEditItemStateChangeEvent<any>) => void`	Called every time the `removeItem` changes.
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.
onResizeEndDragAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	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.
onResizeItemChange?	`(event: SchedulerEditItemStateChangeEvent<any>) => void`	Called every time the `resize` changes.
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.
onResizePressAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on resize press. Internal state change will be triggered depending on the specific action types.
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.
onResizeReleaseAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on resize release. Internal state change will be triggered depending on the specific action types.
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.
onResizeStartDragAction?	`(event: SchedulerItemDragEvent, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	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.
onSeriesChange?	`(event: SchedulerEditItemStateChangeEvent<undefined>) => void`	Called every time the `series` changes.
onSeriesClick?	`(event: SchedulerOccurrenceDialogStateChangeEvent<any>) => void`	Called whenever the `series` option is selected from the `OccurrenceDialog`.
onSeriesClickAction?	`(event: SchedulerOccurrenceDialogStateChangeEvent<any>, props: SchedulerEditItemProps, state: SchedulerEditItemState) => SchedulerEditItemAction \| SchedulerEditItemAction[]`	An action callback. Used to define the component behavior on series click. Internal state change will be triggered depending on the specific action types.
onShowOccurrenceDialogChange?	`(event: SchedulerEditItemStateChangeEvent<boolean>) => void`	Called every time the `showOccurrenceDialog` changes.
onShowRemoveDialogChange?	`(event: SchedulerEditItemStateChangeEvent<boolean>) => void`	Called every time the `showRemoveDialog` changes.
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

SchedulerEditItemProps

In this article

Not finding the help you need?