DayPilot.Calendar.onTimeRangeSelect

The onTimeRangeSelect event handler fires when the user completes a time range selection in the JavaScript Calendar component, before the default action configured by DayPilot.Calendar.timeRangeSelectedHandling is performed.

Declaration

DayPilot.Calendar.onTimeRangeSelect(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.preventDefault() - cancels the default action and prevents DayPilot.Calendar.onTimeRangeSelected(args)

Notes

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

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelect: args => {
    if (args.origin === "click") {
      args.preventDefault();
    }
  },
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelect: args => {
    if (args.origin === "click") {
      args.preventDefault();
    }
  },
  // ...
};

React

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

const onTimeRangeSelect = (args) => {
  if (args.origin === "click") {
    args.preventDefault();
  }
};

Vue

<DayPilotCalendar
  timeRangeSelectedHandling="Enabled"
  @timeRangeSelect="onTimeRangeSelect"
  <!-- ... -->
/>

const onTimeRangeSelect = (args) => {
  if (args.origin === "click") {
    args.preventDefault();
  }
};

See Also

Event Creation [doc.daypilot.org]

DayPilot.Calendar.onTimeRangeSelected

DayPilot.Calendar.timeRangeSelectedHandling

DayPilot.Calendar Class