javascript scheduler selecting multiple time ranges

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.


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


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

var ranges = dp.multirange.get();

The item structure:


You can enable multi-range selecting using AllowMultiRange property of the config object:

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

You can access all selected ranges using e.Multirange property in OnTimeRangeSelected event handler on the server side:

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);