DayPilot.Navigator.onVisibleRangeChange

The onVisibleRangeChange event handler fires whenever the visible range changes, before the default action configured by visibleRangeChangedHandling is performed.

Declaration

DayPilot.Navigator.onVisibleRangeChange(args)

Parameters

• args.start (DayPilot.Date) - visible range start (read-only)

• args.end (DayPilot.Date) - visible range end (read-only)

• args.preventDefault() - cancels the default action

Notes

In most cases, the visible range change is caused by the user clicking "next" or "previous" icons at the top of the Navigator. The visible range can also change during a select() call if autofocus isn't disabled.

Examples

JavaScript

const dp = new DayPilot.Navigator("dp", {
  onVisibleRangeChange: (args) => {
    console.log("Changing visible range", args.start.toString(), args.end.toString());
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.NavigatorConfig = {
  onVisibleRangeChange: (args) => {
    console.log("Changing visible range", args.start.toString(), args.end.toString());
  },
  // ...
};

React

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

const onVisibleRangeChange = (args) => {
  console.log("Changing visible range", args.start.toString(), args.end.toString());
};

Vue

<DayPilotNavigator
  @visibleRangeChange="onVisibleRangeChange"
  <!-- ... -->
/>

const onVisibleRangeChange = (args) => {
  console.log("Changing visible range", args.start.toString(), args.end.toString());
};

See Also

DayPilot.Navigator.visibleRangeChangedHandling

DayPilot.Navigator.select()

DayPilot.Navigator Class