DayPilot.Navigator.onTimeRangeSelect

The onTimeRangeSelect event handler fires when the selection changes, before the default action configured by timeRangeSelectedHandling is performed.

Declaration

DayPilot.Navigator.onTimeRangeSelect(args)

Parameters

• args.day (DayPilot.Date) - day that was clicked, if applicable

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

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

• args.days (number) - selected day count

• args.preventDefault() - prevents the default action

Notes

Use args.preventDefault() to handle the selection change without running the default action selected using timeRangeSelectedHandling.

Examples

JavaScript

const dp = new DayPilot.Navigator("dp", {
  onTimeRangeSelect: (args) => {
    if (args.days > 7) {
      args.preventDefault();
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.NavigatorConfig = {
  onTimeRangeSelect: (args) => {
    if (args.days > 7) {
      args.preventDefault();
    }
  },
  // ...
};

React

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

const onTimeRangeSelect = (args) => {
  if (args.days > 7) {
    args.preventDefault();
  }
};

Vue

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

const onTimeRangeSelect = (args) => {
  if (args.days > 7) {
    args.preventDefault();
  }
};

See Also

DayPilot.Navigator.timeRangeSelectedHandling

DayPilot.Navigator Class