Time Range Multi-Selecting

Available since DayPilot Pro 8.0.

You can enable selecting of multiple time ranges at once.

• This feature is disabled by default.

• Hold Ctrl (Command on Mac) to select multiple ranges. As soon as you release the Ctrl key the TimeRangeSelected event will be fired.

• If event overlap prevention is enabled it will not be possible to add a conflicting range.

• Multiple time range selecting will work for more than scheduler controls on the page. TimeRangeSelected will only be fired for the control with the range that was added last.

JavaScript

Enable range multi-selecting using allowMultiRange property:

dp.allowMultiRange = true;

The selected ranges will be available in onTimeRangeSelect and onTimeRangeSelected event handlers as args.multirange:

dp.onTimeRangeSelected = function(args) {
  var name = prompt("New event name:", "Event");
  if (!name) return;

  var ranges = args.multirange;

  ranges.each(function(item) {
      var e = new DayPilot.Event({
          start: item.start,
          end: item.end,
          id: DayPilot.guid(),
          resource: item.resource,
          text: name
      });
      dp.events.add(e);
  });

  dp.clearSelection();
  dp.message("Created");
}

You can also get an array of selected ranges using dp.multirange.get():

var ranges = dp.multirange.get();

The item structure:

• start (DayPilot.Date object, start of the selection)

• end (DayPilot.Date object, end of the selection)

• resource (string, resource ID)

• calendar (DayPilot.Scheduler object, parent)

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  // ...    
  AllowMultiRange = true,
})

protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
{
  if (e.Multirange != null)
  {
      foreach (TimeRangeSelectedArgs item in e.Multirange) {
        new EventManager(Controller, Id).EventCreate(item.Start, item.End, "Default name", item.Resource);
      }
      UpdateWithMessage("New event created", CallBackUpdateType.EventsOnly);
  }
}