DayPilot.Gantt.onTimeRangeSelect

The onTimeRangeSelect event handler fires when the user selects a date/time range using drag and drop in the JavaScript Gantt Chart component, before the default action is performed.

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

Declaration

DayPilot.Gantt.onTimeRangeSelect(args)

Parameters

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

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

• args.isNew (boolean) - indicates whether the selected range belongs to a new task

• args.control (DayPilot.Scheduler) - control instance

• args.preventDefault() - prevents the default action and onTimeRangeSelected

Notes

Call args.preventDefault() when you need to validate or reject the selected range before task creation continues. If you allow the default flow to continue, the related DayPilot.Gantt.onTimeRangeSelected event can handle the completed selection.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  rowCreateAllowTimeRangeSelection: true,
  onTimeRangeSelect: (args) => {
    if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
      args.preventDefault();
    }
  },
  // ...
});
gantt.init();

Angular

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

config: DayPilot.GanttConfig = {
  rowCreateAllowTimeRangeSelection: true,
  onTimeRangeSelect: (args) => {
    if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotGantt
  rowCreateAllowTimeRangeSelection={true}
  onTimeRangeSelect={onTimeRangeSelect}
  {/* ... */}
/>

const onTimeRangeSelect = (args) => {
  if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
    args.preventDefault();
  }
};

Vue

<DayPilotGantt
  :rowCreateAllowTimeRangeSelection="true"
  @timeRangeSelect="onTimeRangeSelect"
  <!-- ... -->
/>

const onTimeRangeSelect = (args) => {
  if (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
    args.preventDefault();
  }
};

See Also

DayPilot.Gantt.onTimeRangeSelected

DayPilot.Gantt.rowCreateAllowTimeRangeSelection

DayPilot.Gantt Class