DayPilot.Calendar.onTimeRangeSelected

The onTimeRangeSelected event handler fires when the user completes a time range selection in the JavaScript Calendar component, after the default action configured by DayPilot.Calendar.timeRangeSelectedHandling has been performed.

Declaration

DayPilot.Calendar.onTimeRangeSelected(args)

Parameters

• args.control (DayPilot.Calendar) - control instance

• args.start (DayPilot.Date) - selection start

• args.end (DayPilot.Date) - selection end

• args.resource (string | number) - selection resource in Resources view

• args.origin ("click" | "drag" | "api") - selection origin; "click" is available since 2023.2.5592

• args.alt (boolean) - Alt key pressed status (since 2026.2.6913)

• args.ctrl (boolean) - Ctrl key pressed status (since 2026.2.6913)

• args.shift (boolean) - Shift key pressed status (since 2026.2.6913)

• args.meta (boolean) - Meta key pressed status (since 2026.2.6913)

Notes

While selecting is in progress, the component fires DayPilot.Calendar.onTimeRangeSelecting(args) on every change.

In api=1 mode, the legacy signature is onTimeRangeSelected(start, end, column).

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelected: async args => {
    const modal = await DayPilot.Modal.prompt("New event name:", "Event");
    args.control.clearSelection();
    if (modal.canceled) {
      return;
    }
    args.control.events.add({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      text: modal.result
    });
  },
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelected: async args => {
    const modal = await DayPilot.Modal.prompt("New event name:", "Event");
    args.control.clearSelection();
    if (modal.canceled) {
      return;
    }
    args.control.events.add({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      text: modal.result
    });
  },
  // ...
};

React

<DayPilotCalendar
  timeRangeSelectedHandling="Enabled"
  onTimeRangeSelected={onTimeRangeSelected}
  {/* ... */}
/>

const onTimeRangeSelected = async (args) => {
  const modal = await DayPilot.Modal.prompt("New event name:", "Event");
  args.control.clearSelection();
  if (modal.canceled) {
    return;
  }
  args.control.events.add({
    start: args.start,
    end: args.end,
    id: DayPilot.guid(),
    text: modal.result
  });
};

Vue

<DayPilotCalendar
  timeRangeSelectedHandling="Enabled"
  @timeRangeSelected="onTimeRangeSelected"
  <!-- ... -->
/>

const onTimeRangeSelected = async (args) => {
  const modal = await DayPilot.Modal.prompt("New event name:", "Event");
  args.control.clearSelection();
  if (modal.canceled) {
    return;
  }
  args.control.events.add({
    start: args.start,
    end: args.end,
    id: DayPilot.guid(),
    text: modal.result
  });
};

See Also

Event Creation [doc.daypilot.org]

DayPilot.Calendar.onTimeRangeSelect

DayPilot.Calendar.timeRangeSelectedHandling

DayPilot.Calendar.clearSelection()

DayPilot.Calendar Class