Docs
Calendar
Plugins
Resize

Resize

Resize events in the time grid by dragging their bottom edge, and fullday/multiple-day events by dragging their right edge.

Install

npm i @schedule-x/resize

Usage

import { createResizePlugin } from '@schedule-x/resize'
 
const calendar = createCalendar({
  /* other configuration */
  plugins: [
    createResizePlugin()
  ],
 
  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 resizing:

import { createResizePlugin } from '@schedule-x/resize'
 
const calendar = createCalendar({
  /* other configuration */
  plugins: [
    createResizePlugin(30) // 30 minute intervals when resizing
  ]
})

Available values are 15 (default), 30 and 60

Last updated on

We use cookies for marketing purposes. By clicking "Accept", you consent to the use of all cookies. If you decline, we will only use functional cookies. You can read more about our cookie policy here.