DayPilot.Navigator.onVisibleRangeChanged

The onVisibleRangeChanged event handler fires whenever the visible range changes.

Declaration

DayPilot.Navigator.onVisibleRangeChanged(args)

Parameters

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

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

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.

In api=1 mode, the legacy signature is onVisibleRangeChanged(start, end), where start and end specify the visible range start and end.

Examples

JavaScript

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

Angular

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

config: DayPilot.NavigatorConfig = {
  onVisibleRangeChanged: (args) => {
    console.log("Visible range changed", args.start.toString(), args.end.toString());
  },
  // ...
};

React

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

const onVisibleRangeChanged = (args) => {
  console.log("Visible range changed", args.start.toString(), args.end.toString());
};

Vue

<DayPilotNavigator
  @visibleRangeChanged="onVisibleRangeChanged"
  <!-- ... -->
/>

const onVisibleRangeChanged = (args) => {
  console.log("Visible range changed", args.start.toString(), args.end.toString());
};

See Also

DayPilot.Navigator.select()

DayPilot.Navigator Class