SchedulerEditItemProps

Represents the props of the KendoReact SchedulerEditItem component.

NameTypeDefaultDescription

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.

formItem?

any

Setting this property will force the formItem to be in controlled state, allowing further customization.

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.

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>