javascript scheduler resizing multiple events drag drop

Supported since DayPilot Pro 8.1.

It is possible to enable drag and drop resizing of all selected events at once.

  • This feature is disabled by default.

  • If event overlap prevention is enabled it will not be possible to drop the events at the new location if any of them conflicts with another event.

JavaScript

Enable multi-resizing using .allowMultiResize = true;

It is possible to get a list of all resized events using args.multiresize in the following event handlers:

  • onEventResizing

  • onEventResize

  • onEventResized

The args.multiresize property holds an array of all updated events. Item structure:

The master event is accessible using args.e just like during regular event resizing.

dp.eventClickHandling = "Select";
dp.allowMultiResize = true;
dp.onEventResized = function(args) {
  dp.message("Events " + args.multiresize.map(function(item) { return item.event.id(); }).join(', ') + " resized.");
};

Demo

API: eventClickHandling, allowMultiResize.

Ctrl-click events to select them, then drag the edge of one selected event. The examples combine click selection with allowMultiResize so the selected events participate in the resize.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    eventClickHandling: "Select",
    allowMultiResize: true
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      eventClickHandling={"Select"}
      allowMultiResize={true}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const eventClickHandling = "Select";
const allowMultiResize = true;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :eventClickHandling="eventClickHandling"
      :allowMultiResize="allowMultiResize"
    />
  </div>
</template>