Time Range Double Click

JavaScript

Time range double click is disabled by default. You can enable it using timeRangeDoubleClickHandling property:

dp.timeRangeDoubleClickHandling = "Enabled";

When it is enabled, double-clicking a time range will trigger the following events:

• onTimeRangeDoubleClick(args)
• onTimeRangeDoubleClicked(args)

API: timeRangeDoubleClickHandling, onTimeRangeDoubleClick.

Double-click an empty slot to enter a reservation name. The handler clears the selection after the dialog and adds a local event only for an accepted, nonempty name.

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

Angular

The config callback uses this.scheduler.control, supplied by @ViewChild, to clear the selection and add the event.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <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"}],
    timeRangeDoubleClickHandling: "Enabled",
    onTimeRangeDoubleClick: async args => {
      const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
      this.scheduler.control.clearSelection();
      if (modal.canceled || !modal.result) { return; }
      this.scheduler.control.events.add({id: DayPilot.guid(), text: modal.result,
        start: args.start, end: args.end, resource: args.resource});
    }
  };

}

React

Capture the control with controlRef. The asynchronous onTimeRangeDoubleClick prop reads scheduler.current after the dialog completes.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);

  return <div>

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

Vue

Bind :onTimeRangeDoubleClick to the script function. It reaches the Scheduler API through scheduler.value.control.

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

</script>

<template>
  <div>

    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :timeRangeDoubleClickHandling="timeRangeDoubleClickHandling"
      :onTimeRangeDoubleClick="onTimeRangeDoubleClick"
    />
  </div>
</template>

ASP.NET WebForms

The double click is handled according to TimeRangeDoubleClickHandling value:

• Disabled (default)
• JavaScript (TimeRangeDoubleClickJavaScript is fired on the client side)
• PostBack (fires TimeRangeDoubleClick using PostBack)
• CallBack (fires TimeRangeDoucleClick using CallBack)

ASP.NET MVC

The double click is handled according to TimeRangeDoubleClickHandling value:

• Disabled (default)
• JavaScript (TimeRangeDoubleClickJavaScript is fired on the client side)
• CallBack (fires TimeRangeDoucleClick using CallBack)