DayPilot.Gantt.onTimeRangeSelected

The onTimeRangeSelected event handler fires when the user completes a date/time range selection using drag and drop in the JavaScript Gantt Chart component.

Time range selection is only supported for the new task row, and only when rowCreateAllowTimeRangeSelection is enabled.

Declaration

DayPilot.Gantt.onTimeRangeSelected(args)

Parameters

Notes

Use DayPilot.Gantt.onTimeRangeSelect if you need to validate or cancel the range before this event is reached. This handler is a good place to react to the completed selection and clear the temporary highlight.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  rowCreateAllowTimeRangeSelection: true,
  onTimeRangeSelected: (args) => {
    args.control.clearSelection();
    console.log("Selected range:", args.start.toString(), args.end.toString());
  },
  // ...
});
gantt.init();

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>
config: DayPilot.GanttConfig = {
  rowCreateAllowTimeRangeSelection: true,
  onTimeRangeSelected: (args) => {
    args.control.clearSelection();
    console.log("Selected range:", args.start.toString(), args.end.toString());
  },
  // ...
};

React

<DayPilotGantt
  rowCreateAllowTimeRangeSelection={true}
  onTimeRangeSelected={onTimeRangeSelected}
  {/* ... */}
/>
const onTimeRangeSelected = (args) => {
  args.control.clearSelection();
  console.log("Selected range:", args.start.toString(), args.end.toString());
};

Vue

<DayPilotGantt
  :rowCreateAllowTimeRangeSelection="true"
  @timeRangeSelected="onTimeRangeSelected"
  <!-- ... -->
/>
const onTimeRangeSelected = (args) => {
  args.control.clearSelection();
  console.log("Selected range:", args.start.toString(), args.end.toString());
};

See Also

DayPilot.Gantt.onTimeRangeSelect

DayPilot.Gantt.rowCreateAllowTimeRangeSelection

DayPilot.Gantt Class

Availability

Availability of this API item in DayPilot editions:

LitePro
DayPilot for JavaScript