Selecting Multiple Time Ranges

Available since DayPilot Pro 8.0.

You can enable selecting of multiple time ranges at once.

• This feature is disabled by default.

• Hold Ctrl (Command on Mac) to select multiple ranges. As soon as you release the Ctrl key the TimeRangeSelected event will be fired.

• If event overlap prevention is enabled it will not be possible to add a conflicting range.

• Multiple time range selecting will work for more than scheduler controls on the page. TimeRangeSelected will only be fired for the control with the range that was added last.

JavaScript

Enable range multi-selecting using allowMultiRange property:

dp.allowMultiRange = true;

The selected ranges will be available in onTimeRangeSelect and onTimeRangeSelected event handlers as args.multirange:

dp.allowMultiRange = true;
dp.onTimeRangeSelected = async args => {
  const modal = await DayPilot.Modal.prompt("New event name:", "Event");
  if (modal.canceled || !modal.result) { return; }
  for (const range of args.multirange) {
    const target = range.calendar || dp;
    target.events.add({id: DayPilot.guid(), text: modal.result,
      start: range.start, end: range.end, resource: range.resource});
    target.clearSelection();
  }
};

You can also get an array of selected ranges using dp.multirange.get():

var ranges = dp.multirange.get();

The item structure:

• start (DayPilot.Date object, start of the selection)

• end (DayPilot.Date object, end of the selection)

• resource (string, resource ID)

• calendar (DayPilot.Scheduler object, parent)

API: allowMultiRange, multiRangeMode.

Hold Ctrl or Command while selecting ranges. Create reservations adds one local event for each selected range and then clears the multi-range selection.

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

Angular

The button method reads multirange.get() through the 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()">Create reservations</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"}],
    allowMultiRange: true,
    multiRangeMode: "CtrlOrMeta"
  };
  async action0() {
    const dp = this.scheduler.control;
    for (const range of dp.multirange.get()) { dp.events.add({id: DayPilot.guid(), text: "Reservation", start: range.start, end: range.end, resource: range.resource}); }
    dp.multirange.clear();
  }
}

React

Retain the Scheduler control using controlRef; the button queries its multi-range collection at click time.

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;
    for (const range of dp.multirange.get()) { dp.events.add({id: DayPilot.guid(), text: "Reservation", start: range.start, end: range.end, resource: range.resource}); }
    dp.multirange.clear();
  }
  return <div>
    <button onClick={action0}>Create reservations</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"}]}
      allowMultiRange={true}
      multiRangeMode={"CtrlOrMeta"}
    />
  </div>;
}

Vue

The script's click function uses the Scheduler template ref to access both multirange and events.

<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 allowMultiRange = true;
const multiRangeMode = "CtrlOrMeta";
async function action0() {
  const dp = scheduler.value.control;
  for (const range of dp.multirange.get()) { dp.events.add({id: DayPilot.guid(), text: "Reservation", start: range.start, end: range.end, resource: range.resource}); }
  dp.multirange.clear();
}
</script>

<template>
  <div>
    <button @click="action0">Create reservations</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :allowMultiRange="allowMultiRange"
      :multiRangeMode="multiRangeMode"
    />
  </div>
</template>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  // ...    
  AllowMultiRange = true,
})

protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
{
  if (e.Multirange != null)
  {
      foreach (TimeRangeSelectedArgs item in e.Multirange) {
        new EventManager(Controller, Id).EventCreate(item.Start, item.End, "Default name", item.Resource);
      }
      UpdateWithMessage("New event created", CallBackUpdateType.EventsOnly);
  }
}