SchedulerEditItemProps

Represents the props of the Kendo UI for Vue SchedulerEditItem component.

Name	Type	Description
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?	`any`	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?	`any`	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?	`any`	Overrides the default component responsible for visualizing a single item. The default Component is: SchedulerItem.
itemRef?	`any`	Represents the `ref` of the actual `item`.
itemStyle?	`any`	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`
occurrenceDialog?	`any`	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 Kendo UI for VueDraggable 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 Kendo UI for VueDraggable 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 Kendo UI for VueDraggable 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 Kendo UI for VueDraggable 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 Kendo UI for VueDraggable 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 Kendo UI for VueDraggable 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 Kendo UI for VueDraggable 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?	`any`	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?	`any`	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.
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?	`any`	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 & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Resources

Productivity and Design Tools

SchedulerEditItemProps

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!