Vue Scheduler - appointmentDragging

autoScroll

Enables automatic scrolling while dragging an appointment beyond the viewport.

Selector: auto-scroll

Type:

Boolean

Default Value: true

data

A container for custom data.

Type: any | undefined

Default Value: undefined

group

Allows you to group several UI components so that users can drag and drop appointments between them.

Type:

String

| undefined

Default Value: undefined

Set this property to identical values for the UI components you want to collect in a single group.

onAdd

A function that is called when a new appointment is added.

Selector: @add

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	Scheduler	The UI component's instance.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the appointment's source UI component.
fromData	any	Custom data associated with the source UI component.
itemData	any	The data object of the appointment being dragged.
itemElement	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the appointment's target UI component.
toData	any	Custom data associated with the target UI component.

onDragEnd

A function that is called when the dragged appointment's position is changed.

Selector: @drag-end

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
component	Scheduler	The UI component's instance.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the appointment's source UI component. Works only for element drag and drop between components.
fromData	any	Custom data associated with the source UI component. Works only for element drag and drop between components.
itemData	any	The appointment's data before the drag operation
itemElement	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the appointment's target UI component. Works only for element drag and drop between components.
toData	any	Custom data associated with the target UI component. Works only for element drag and drop between components.
toItemData	any	The appointment's data after dragging.

onDragMove

A function that is called every time a draggable appointment is moved.

Selector: @drag-move

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
component	Scheduler	The UI component's instance.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the appointment's source UI component. Works only for element drag and drop between components.
fromData	any	Custom data associated with the source UI component. Works only for element drag and drop between components.
itemData	any	The appointment's data before the drag operation.
itemElement	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the appointment's target UI component. Works only for element drag and drop between components.
toData	any	Custom data associated with the target UI component. Works only for element drag and drop between components.

onDragStart

A function that is called when the drag gesture is initialized.

Selector: @drag-start

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
component	Scheduler	The UI component's instance.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
fromData	any	Custom data associated with the source UI component. Works only for element drag and drop between components.
itemData	any	The appointment's data before the drag operation.
itemElement	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

onRemove

A function that is called when a draggable appointment is removed.

Selector: @remove

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	Scheduler	The UI component's instance.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the appointment's source UI component.
fromData	any	Custom data associated with the source UI component.
itemData	any	The data object of the appointment being dragged.
itemElement	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the appointment's target UI component.