A plugin that enables users to edit appointments via drag-and-drop.
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';| 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. |
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. |
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. |
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. |
Describes properties of the component that renders a container for the appointment being dragged.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | Represents the appointment being dragged. |
| 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.