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

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)