DragDropProvider Plugin Reference

A plugin that enables users to edit appointments via drag-and-drop.

Import

Use the following statement to import a plugin with embedded theme components:

import { DragDropProvider } from '@devexpress/dx-react-scheduler-material-ui';

If you want to use custom components, you can import the themeless plugin:

import { DragDropProvider } from '@devexpress/dx-react-scheduler';

User Reference

Dependencies

Properties

Name Type Default Description
allowDrag? (appointmentData: AppointmentModel) => boolean () => true A function that specifies draggable appointments.
allowResize? (appointmentData: AppointmentModel) => boolean () => true A function that specifies resizable appointments.
scrollSpeed? number 15 Specifies the scroll speed when an appointment is resized or dragged and dropped.
draftAppointmentComponent ComponentType<DragDropProvider.DraftAppointmentProps> A component that renders the appointment being dragged.
sourceAppointmentComponent ComponentType<DragDropProvider.SourceAppointmentProps> A component that renders a copy of the appointment being dragged in its previous location.
resizeComponent ComponentType<DragDropProvider.ResizeProps> A component that renders a handle used to resize the appointment.
containerComponent ComponentType<DragDropProvider.ContainerProps> A component that renders a container for the appointment being dragged.

Interfaces

DragDropProvider.DraftAppointmentProps

Describes properties of the component that renders the appointment being dragged.

Field Type Description
data AppointmentModel Specifies the appointment's data.
style object Configures the appointment's geometry and position.
type string Specifies the appointment's type.
fromPrev boolean true if the appointment is continued from the previous day/week/month/year.
toNext boolean true if the appointment continues on the next day/week/month/year.
isShaded? boolean Indicates whether the appointment is shaded.

DragDropProvider.SourceAppointmentProps

Describes properties of the component that renders a copy of the appointment being dragged in its previous location.

Field Type Description
data AppointmentModel Specifies the appointment's data.
type string Specifies the appointment's type.
isShaded? boolean Indicates whether the appointment is shaded.

DragDropProvider.ResizeProps

Describes properties of the component that renders a handle used to resize the appointment.

Field Type Description
position 'start' | 'end' Specifies the handle's position in the appointment.
appointmentType 'vertical' | 'horizontal' Specifies whether the appointment is vertical or horizontal.

DragDropProvider.ContainerProps

Describes properties of the component that renders a container for the appointment being dragged.

Field Type Description
children ReactNode Represents the appointment being dragged.

Plugin Components

Name Properties Description
DragDropProvider.DraftAppointment DragDropProvider.DraftAppointmentProps A component that renders the appointment being dragged.
DragDropProvider.SourceAppointment DragDropProvider.SourceAppointmentProps A component that renders a copy of the appointment being dragged in its previous location.
DragDropProvider.Resize DragDropProvider.ResizeProps A component that renders the handle of the appointment being resized.
DragDropProvider.Container DragDropProvider.ContainerProps A component that renders a container for the appointment being dragged.

Additional properties are added to the component's root element.