New to KendoReactStart a free 30-day trial

Represents the props of the KendoReact SchedulerViewItem component.

Definition

Package:@progress/kendo-react-scheduler

Properties

children?

ReactNode

Specifies the children of the SchedulerItem.

Setting this property overrides the default elements rendered by the SchedulerItem.

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

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.

dragHint?

boolean

Specifies if the current SchedulerItem is used as a DragHint.

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.

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.

Represents the current group in which the item is rendered.

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.

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.

Represents if the item is a single occurrence of a recurring DataItem.

item?

ComponentType​<SchedulerItemProps>

Overrides the default component responsible for visualizing a single item.

The default Component is: SchedulerItem.

Represents the ref of the actual item.

onBlur?

(event: SchedulerItemFocusEvent) => void

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

Parameters:eventSchedulerItemFocusEvent

onClick?

(event: SchedulerItemMouseEvent) => void

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

Parameters:eventSchedulerItemMouseEvent

onDoubleClick?

(event: SchedulerItemMouseEvent) => void

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

Parameters:eventSchedulerItemMouseEvent

onDrag?

(event: SchedulerItemDragEvent) => void

Fires each time the element is dragged.

This event is used by the Drag & Drop functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDrag callback.

Parameters:eventSchedulerItemDragEvent

onFocus?

(event: SchedulerItemFocusEvent) => void

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

Parameters:eventSchedulerItemFocusEvent

onKeyDown?

(event: SchedulerItemKeyboardEvent) => void

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

Parameters:eventSchedulerItemKeyboardEvent

onKeyPress?

(event: SchedulerItemKeyboardEvent) => void

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

Parameters:eventSchedulerItemKeyboardEvent

onKeyUp?

(event: SchedulerItemKeyboardEvent) => void

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

Parameters:eventSchedulerItemKeyboardEvent

onMouseDown?

(event: SchedulerItemMouseEvent) => void

Fires each time the element, or any of its child elements, receives a mousedown event.

Parameters:eventSchedulerItemMouseEvent

onMouseEnter?

(event: SchedulerItemMouseEvent) => void

Fires each time the element, or any of its child elements, receives a mouseenter event.

Parameters:eventSchedulerItemMouseEvent

onMouseLeave?

(event: SchedulerItemMouseEvent) => void

Fires each time the element, or any of its child elements, receives a mouseleave event.

Parameters:eventSchedulerItemMouseEvent

onMouseOut?

(event: SchedulerItemMouseEvent) => void

Fires each time the element, or any of its child elements, receives a mouseout event.

Parameters:eventSchedulerItemMouseEvent

onMouseOver?

(event: SchedulerItemMouseEvent) => void

Fires each time the element, or any of its child elements, receives a mouseover event.

Parameters:eventSchedulerItemMouseEvent

onMouseUp?

(event: SchedulerItemMouseEvent) => void

Fires each time the element, or any of its child elements, receives a mouseup event.

Parameters:eventSchedulerItemMouseEvent

onPress?

(event: SchedulerItemDragEvent) => void

Fires each time the element receives a press event.

This event is used by the Drag & Drop functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDragStart callback.

Parameters:eventSchedulerItemDragEvent

onRelease?

(event: SchedulerItemDragEvent) => void

Fires when you release the dragged element.

This event is used by the Drag & Drop functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDragEnd callback.

Parameters:eventSchedulerItemDragEvent

onRemoveClick?

(event: SchedulerItemMouseEvent) => void

Fires when you click the delete icon.

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

Parameters:eventSchedulerItemMouseEvent

onResizeEndDrag?

(event: SchedulerItemDragEvent) => void

Fires each time the resize handler responsible for the item end is being dragged.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDrag callback.

Parameters:eventSchedulerItemDragEvent

onResizePress?

(event: SchedulerItemDragEvent) => void

Fires each time any of the resize handlers receives a press event.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDragStart callback.

Parameters:eventSchedulerItemDragEvent

onResizeRelease?

(event: SchedulerItemDragEvent) => void

Fires when you release the dragged resize handler.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDragEnd callback.

Parameters:eventSchedulerItemDragEvent

onResizeStartDrag?

(event: SchedulerItemDragEvent) => void

Fires each time the resize handler responsible for the item start is being dragged.

This event is used by the Resize functionality of the SchedulerItem. The SchedulerItem uses the KendoReactDraggable instead of the onDrag callback.

Parameters:eventSchedulerItemDragEvent

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.

Specifies if the current SchedulerItem is used as a ResizeHint.

selected?

boolean

Sets the selected state of the SchedulerItem. By default, the k-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

null | string

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

tabIndex?

null | number

Specifies the tabIndex attribute of the wrapping element of the SchedulerItem.

Providing null does 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.

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.