Moving Multiple Events

Supported since DayPilot Pro 8.0.

It is possible to enable drag and drop moving 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.

By default, multiple events can only be moved on the time (X axis). You can modify this behavior using multiMoveVerticalMode property:

• "Disabled" (horizontal-only moving, default)

• "Master" (the master event can be moved horizontally and vertically, other events stay in the original row)

• "All" (all events can be moved horizontally and vertically)

JavaScript

Enable multimove using .allowMultiMove = true;

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

• onEventMoving

• onEventMove

• onEventMoved

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

• event (DayPilot.Event object)

• start (DayPilot.Date, new event start)

• end (DayPilot.Date, new event end)

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

dp.eventClickHandling = "Select";
dp.allowMultiMove = true;
dp.onEventMoved = function(args) {
  dp.message("Events " + args.multimove.map(function(item) { return item.event.id(); }).join(', ') + " moved.");
};

Validating a Group Move

In onEventMoving, args.invalid indicates that at least one event has an invalid calculated target, so the whole move is blocked. For example, when skipping non-business hours, a target resource may not have enough business time for one of the selected events.

Use args.allowed = false for your own restrictions. Setting it to true cannot permit an invalid target. Overlap conflicts are reported separately using args.overlapping.

Demo

• Event Multi-Moving Demo [javascript.daypilot.org]

Tutorial

• JavaScript Scheduler: Copy Multiple Events

API: eventClickHandling, allowMultiMove.

Try the examples by Ctrl-clicking several events, then dragging one selected event. eventClickHandling: "Select" provides selection and allowMultiMove enables the group move.

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",
    allowMultiMove: 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"}
      allowMultiMove={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 allowMultiMove = true;

</script>

<template>
  <div>

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