DayPilot.Month.onTimeRangeSelect

The onTimeRangeSelect event handler fires when the user selects a time range using drag and drop in the monthly calendar component.

You can use it to create a new event.

Declaration

DayPilot.Month.onTimeRangeSelect(args)

Parameters

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

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

• args.preventDefault() - cancels the default action

Notes

This event fires before the default action. For time range selection, there is no default action, so it is equivalent to DayPilot.Month.onTimeRangeSelected. Related handling options are configured using DayPilot.Month.timeRangeSelectedHandling.

Examples

JavaScript

const month = new DayPilot.Month("dp", {
  onTimeRangeSelect: (args) => {
    console.log(args.start, args.end);
  },
  // ...
});
month.init();

Angular

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

config: DayPilot.MonthConfig = {
  onTimeRangeSelect: (args) => {
    console.log(args.start, args.end);
  },
  // ...
};

React

<DayPilotMonth
  onTimeRangeSelect={onTimeRangeSelect}
  {/* ... */}
/>

const onTimeRangeSelect = (args) => {
  console.log(args.start, args.end);
};

Vue

<DayPilotMonth
  @timeRangeSelect="onTimeRangeSelect"
  <!-- ... -->
/>

const onTimeRangeSelect = (args) => {
  console.log(args.start, args.end);
};

See Also

Event Creation [doc.daypilot.org]

DayPilot.Month.onTimeRangeSelected

DayPilot.Month.timeRangeSelectedHandling

DayPilot.Month Class