Drag and Drop
Update event time and date using a classical drag and drop. Available in all views except the month agenda- and list views.
Install
npm i @schedule-x/drag-and-drop
Usage
import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
const calendar = createCalendar({
/* other configuration */
plugins: [
createDragAndDropPlugin()
],
callbacks: {
onEventUpdate(updatedEvent) {
console.log('onEventUpdate', updatedEvent)
},
// (Optionally) run your validation or side effects
// return false to stop the update, and true to allow it
onBeforeEventUpdate(oldEvent, newEvent, $app) {
return false
}
}
})
Configuration
You can configure the length, in minutes, of the intervals that are used when dragging:
import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
const calendar = createCalendar({
/* other configuration */
plugins: [
createDragAndDropPlugin(30) // drag with 30 minutes intervals
]
})
Available values are 15
(default), 30
and 60
Limitations with recurring events
When using the event recurrence plugin, most recurring events can be updated via drag and drop. However, events with BYDAY
rules cannot be updated by dragging. This includes events like:
FREQ=MONTHLY;BYDAY=1MO
(first Monday of each month)FREQ=YEARLY;BYDAY=-1FR
(last Friday of each year)
If you need to allow users to modify such events, consider:
- Disabling drag and drop for these specific events using the
onBeforeEventUpdate
callback - Providing alternative UI (like the interactive event modal) for editing
- Updating events programmatically through the events service
Methods
setInterval(minutes: number)
Set the interval, in minutes, for dragging events.
import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
const dragAndDropPlugin = createDragAndDropPlugin()
const calendar = createCalendar({
/* other configuration */
plugins: [
dragAndDropPlugin
]
})
dragAndDropPlugin.setInterval(30)
Last updated on