DayPilot.Month.onTimeRangeSelected

The onTimeRangeSelected event handler fires when the user selects a time range using drag and drop in the monthly calendar component.

You can use it to create a new event.

This event is fired after the default action. In case of time range selection, there is no default action, so it is equivalent to DayPilot.Month.onTimeRangeSelect.

Declaration

DayPilot.Month.onTimeRangeSelected(args)

Parameters

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

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

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

Notes

In DayPilot.Month.api = 1 mode, the legacy signature is onTimeRangeSelected(start, end, resource), where resource is the id of the selected resource.

Examples

JavaScript

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

Angular

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

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

React

<DayPilotMonth
  onTimeRangeSelected={onTimeRangeSelected}
  {/* ... */}
/>

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

Vue

<DayPilotMonth
  @timeRangeSelected="onTimeRangeSelected"
  <!-- ... -->
/>

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

See Also

Event Creation [doc.daypilot.org]

DayPilot.Month.onTimeRangeSelect

DayPilot.Month.api

DayPilot.Month Class