Selecting Multiple Events

The Scheduler component supports selecting multiple events.

• Individual events can be selected or deselected using Ctrl+click (enabled by default, requires eventClickHandling="Select").

• Multiple events can be selected using Shift+mouse drag using a rectangle selection (needs to be enabled using multiSelectRectangle property).

• You can select multiple items programmatically using the selection API (multiselect.add() method).

• For more details on working with selected events, please see the Event Selecting topic.

Select Multiple Events using Ctrl+Click

To enable selection of events using Ctrl+click, you need to set the default event click action (eventClickHandling) to "Select" and enable multi-selection using allowMultiSelect property.

Scheduler config:

{
  eventClickHandling: "Select",
  allowMultiSelect: true,
  // ...
}

To override the default event click behavior, you can use a custom onEventClick event handler. This will let you handle a simple click using another action (e.g. opening a modal dialog with) and combine it with Ctrl+click handler that adds the event to the selection.

{
  eventClickHandling: "Enabled",
  onEventClick: async args => {
    if (args.ctrl) {
      dp.multiselect.add(args.e);
    }
    else {
      const modal = await DayPilot.Modal.prompt("Edit event name", args.e.data.text);
      if (modal.canceled) {
        return;
      }
      args.e.data.text = modal.result;
      dp.events.update(args.e);
    }
  },
  // ...
}

Get the Selected Events

To get an array of selected events, use the multiselect.get() method:

{
  allowMultiSelect: true,
  eventClickHandling: "Select",
  onEventSelected: args => {
    const selected = dp.multiselect.get();
    console.log("Selected events", selected);
  }
}

Rectangle Selection

To select several events in multiple rows at once, you can use the rectangle selection. This feature lets you create a free-hand selection across several adjacent rows and select all events that overlap with it.

To enable free-hand rectangle selection and set the default action to select underlying events, use the rectangleSelectHandling property in the config:

{
  rectangleSelectHandling: "EventSelect",
  // ...
}

To handle rectangle selection changes in real time, you can use the onRectangleSelecting event handler:

{
  onRectangleSelecting: (args) => {
    const msg = args.events.map(item => item.text()).join(" ");
    console.log(msg);
  },
  // ...
}

To append the events selected using a rectangle to the existing selection, set args.append to true in onRectangleSelect:

{
  onRectangleSelect: (args) => {
    args.append = true;
  }
  // ...
}

Demo

• JavaScript Scheduler Event Multi-Selecting Demo

Tutorials

• JavaScript Scheduler: Copy Multiple Events

• JavaScript Scheduler: Swap Events using Context Menu

API: eventClickHandling.

Ctrl-click reservations, then use Show selected events to list their names. The button reads the current selection with multiselect.events() and escapes the joined labels for the dialog.

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

Angular

The button method accesses the selection through the Scheduler control obtained with @ViewChild.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Show selected events</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  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"
  };
  async action0() {
    const dp = this.scheduler.control;
    const names = dp.multiselect.events().map(event => event.text()).join(", ");
    await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(names || "No events selected"));
  }
}

React

Keep the control supplied by controlRef in a ref, then read its selection when the button is clicked.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    const names = dp.multiselect.events().map(event => event.text()).join(", ");
    await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(names || "No events selected"));
  }
  return <div>
    <button onClick={action0}>Show selected events</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      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"}
    />
  </div>;
}

Vue

The script's click function reads scheduler.value.control.multiselect through the Scheduler's template ref.

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

const scheduler = ref(null);
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";
async function action0() {
  const dp = scheduler.value.control;
  const names = dp.multiselect.events().map(event => event.text()).join(", ");
  await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(names || "No events selected"));
}
</script>

<template>
  <div>
    <button @click="action0">Show selected events</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :eventClickHandling="eventClickHandling"
    />
  </div>
</template>

ASP.NET WebForms

Demo:

http://www.daypilot.org/demo/Scheduler/EventMultiSelecting.aspx