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.
DayPilot.Gantt.onTimeRangeSelected(args)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
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.
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());
};DayPilot.Gantt.onTimeRangeSelect