DayPilot.Scheduler.onTimeRangeSelected

The onTimeRangeSelected event handler fires when the user selects a date/time range using drag and drop in the JavaScript Scheduler component, after the default action configured by DayPilot.Scheduler.timeRangeSelectedHandling has been performed.

Declaration

DayPilot.Scheduler.onTimeRangeSelected(args)

Parameters

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

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

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

• args.resource (string | number) - selected resource ID

• args.multirange (array) - selected ranges when multi-range selection is enabled; each item exposes start, end, and resource

• args.origin ("click" | "drag" | "api" | "keyboard") - selection origin; "click" is used when the user clicks a grid cell without dragging; available since 2023.4.5803

Notes

The related DayPilot.Scheduler.onTimeRangeSelect event fires before the default action. While drag-and-drop selecting is in progress, the component fires DayPilot.Scheduler.onTimeRangeSelecting whenever the selection changes.

In DayPilot.Scheduler.api = 1 mode, the legacy signature is onTimeRangeSelected(start, end, resource), where start and end are DayPilot.Date objects and resource is the selected resource ID.

Examples

JavaScript

const scheduler = new DayPilot.Scheduler("dp", {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelected: (args) => {
    const name = prompt("New event name:", "Event");
    args.control.clearSelection();
    if (!name) {
      return;
    }
    const event = new DayPilot.Event({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      resource: args.resource,
      text: name
    });
    args.control.events.add(event);
  },
  // ...
});
scheduler.init();

Legacy api=1 compatibility:

const scheduler = new DayPilot.Scheduler("dp", {
  api: 1,
  onTimeRangeSelected: (start, end, resource) => {
    const name = prompt("New event name:", "Event");
    scheduler.clearSelection();
    if (!name) {
      return;
    }
    const event = new DayPilot.Event({
      start,
      end,
      id: DayPilot.guid(),
      resource,
      text: name
    });
    scheduler.events.add(event);
  },
  // ...
});
scheduler.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelected: (args) => {
    const name = prompt("New event name:", "Event");
    args.control.clearSelection();
    if (!name) {
      return;
    }
    const event = new DayPilot.Event({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      resource: args.resource,
      text: name
    });
    args.control.events.add(event);
  },
  // ...
};

React

<DayPilotScheduler
  timeRangeSelectedHandling="Enabled"
  onTimeRangeSelected={onTimeRangeSelected}
  {/* ... */}
/>

const onTimeRangeSelected = (args) => {
  const name = prompt("New event name:", "Event");
  args.control.clearSelection();
  if (!name) {
    return;
  }
  const event = new DayPilot.Event({
    start: args.start,
    end: args.end,
    id: DayPilot.guid(),
    resource: args.resource,
    text: name
  });
  args.control.events.add(event);
};

Vue

<DayPilotScheduler
  timeRangeSelectedHandling="Enabled"
  @timeRangeSelected="onTimeRangeSelected"
  <!-- ... -->
/>

const onTimeRangeSelected = (args) => {
  const name = prompt("New event name:", "Event");
  args.control.clearSelection();
  if (!name) {
    return;
  }
  const event = new DayPilot.Event({
    start: args.start,
    end: args.end,
    id: DayPilot.guid(),
    resource: args.resource,
    text: name
  });
  args.control.events.add(event);
};

See Also

Event Creation [doc.daypilot.org]

DayPilot.Scheduler.onTimeRangeSelect

DayPilot.Scheduler.onTimeRangeSelecting

DayPilot.Scheduler.timeRangeSelectedHandling

DayPilot.Scheduler.api

DayPilot.Scheduler Class