Resize

Resize events in the time grid by dragging their bottom edge, and fullday/multiple-day events by dragging their right edge. Month view support is planned as a minor release during the 1.x.x release cycle.

💡

Though this plugin should technically work also when using custom components in Vue or React, it might look a bit ugly because it forces each custom event to rerender on every resize. This is planned to be fixed with v2.0.0

Install

npm i @schedule-x/resize

Usage

import { createResizePlugin } from '@schedule-x/resize'
 
const calendar = createCalendar({
  // ...other configuration
  plugins: [createResizePlugin()],
})

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

Drag and Drop Event Modal