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
args.start(DayPilot.Date) - selection startargs.end(DayPilot.Date) - selection endargs.isNew(boolean) - indicates whether the selected range belongs to a new taskargs.control(DayPilot.Scheduler) - control instance
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
Availability
Availability of this API item in DayPilot editions:
| Product | Lite | Pro |
|---|---|---|
| DayPilot for JavaScript |
DayPilot