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)