Drag & Drop Plugin
The Drag & Drop plugin enables interactive event management, allowing users to move, resize, and create events directly on the calendar grid.
Installation
Install the plugin using your preferred package manager:
npm install @dayflow/plugin-drag
pnpm add @dayflow/plugin-drag
yarn add @dayflow/plugin-drag
bun add @dayflow/plugin-drag
import { createDragPlugin } from '@dayflow/plugin-drag';Usage
import { useCalendarApp, ViewType } from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
import { createDragPlugin } from '@dayflow/plugin-drag';
function MyCalendar() {
const dragPlugin = createDragPlugin({
enableDrag: true,
enableResize: true,
enableCreate: true,
onEventDrop: (updated, original) => {
console.log('Event moved:', updated);
},
onEventResize: (updated, original) => {
console.log('Event resized:', updated);
},
});
const calendar = useCalendarApp({
// ... views
plugins: [dragPlugin],
});
// ...
}Configuration
| Property | Type | Default | Description |
|---|---|---|---|
enableDrag | boolean | true | Allow moving events by dragging. |
enableResize | boolean | true | Allow changing event duration by resizing. |
enableCreate | boolean | true | Allow creating events by double-clicking the grid. |
enableAllDayCreate | boolean | true | Allow creating all-day events by dragging in the all-day row. |
supportedViews | ViewType[] | [DAY, WEEK, MONTH, YEAR] | Views where drag functionality should be enabled. |
onEventDrop | Function | — | Callback when an event is moved (drag-and-drop). |
onEventResize | Function | — | Callback when an event is resized. |
Plugin API
You can access the drag service to update configuration dynamically:
const dragService = calendar.app.getPlugin<DragService>('drag');
// Disable resizing dynamically
dragService.updateConfig({ enableResize: false });