Time Range Selecting

The users can select a time range using drag and drop. This feature can be used to create new events or copy existing events.

An activated time range selection can be used for further actions:

• time range context menu
• time range double click

Reference

• onTimeRangeDoubleClick
• onTimeRangeSelected

JavaScript

Time range selecting is enabled by default.

The time range is not cleared automatically when the event handler is fired. You can clear it using clearSelection() method.

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onTimeRangeSelected = function (args) {
    var name = prompt("New event name:", "Event");
    dp.clearSelection();
    if (!name) return;
    var e = new DayPilot.Event({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: name
    });
    dp.events.add(e);
    dp.message("Created");
  };
  // ...
  dp.init();
</script>

Tutorials

• JavaScript Scheduler: Use Shift+Drag to Start Selection over Events
• JavaScript Scheduler: Limit Time Range Selection (Min/Max)
• JavaScript Scheduler: Select a Time Range over Multiple Rows

API: onTimeRangeSelected.

The examples prompt for a reservation name after selection. They clear the highlight after the dialog, ignore cancellation or an empty name, and add accepted events locally through args.control.events.add().

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"}],
    onTimeRangeSelected: async args => {
      const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
      args.control.clearSelection();
      if (modal.canceled || !modal.result) { return; }
      args.control.events.add({id: DayPilot.guid(), text: modal.result,
        start: args.start, end: args.end, resource: args.resource});
    }
  };

}

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"}]}
      onTimeRangeSelected={async args => {
        const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
        args.control.clearSelection();
        if (modal.canceled || !modal.result) { return; }
        args.control.events.add({id: DayPilot.guid(), text: modal.result,
          start: args.start, end: args.end, resource: args.resource});
      }}
    />
  </div>;
}

Vue

Pass the asynchronous callback with :onTimeRangeSelected. It receives the selected interval and resource through the DayPilot arguments object.

<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 onTimeRangeSelected = async args => {
  const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
  args.control.clearSelection();
  if (modal.canceled || !modal.result) { return; }
  args.control.events.add({id: DayPilot.guid(), text: modal.result,
    start: args.start, end: args.end, resource: args.resource});
};

</script>

<template>
  <div>

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

ASP.NET WebForms

Time range selecting is disabled by default. You can enable it using TimeRangeSelectedHandling.

Possible TimeRangeSelectedHandling values:

• CallBack (server-side TimeRangeSelected will be fired immediately using AJAX CallBack)
• PostBack (server-side TimeRangeSelected will be fired immediately using PostBack) 
• JavaScript (client-side onTimeRangeSelected event will be fired)
• Hold (does nothing, keeps the selection active)
• HoldForever (does nothing, keeps the selection active; survives a PostBack and CallBack)

Persistent time range selection (selection that doesn't fire TimeRangeSelected right after the dragging is finished - TimeRangeSelectedHandling is set to Hold or HoldForever) can be used to display a context menu or double clicked.

See also:

• How to open a new event dialog using TimeRangeSelected event (modal.js)

Invoking the callback:

• timeRangeDoubleClickCallBack()
• timeRangeSelectedCallBack()

ASP.NET MVC

Time range selecting is disabled by default. You can enable it using TimeRangeSelectedHandling.

Possible TimeRangeSelectedHandling values:

• CallBack (server-side TimeRangeSelected will be fired immediately using AJAX CallBack)
• JavaScript (client-side onTimeRangeSelected event will be fired)

Persistent time range selection (selection that doesn't fire TimeRangeSelected right after the dragging is finished - TimeRangeSelectedHandling is set to Hold or HoldForever) can be used to display a context menu or double clicked.