Event Selecting

Enable event selecting

Event selecting can be mapped to the following user actions:

• onEventClick: to select events on click, set eventClickHandling to "Select"

• onEventDoubleClick: to select events on double click, se eventDoubleClickHandling to select "Select"

Selecting multiple events

Multiple event selection can be enabled using the the allowMultiSelect property (by default, it is turned off).

• When this feature is enabled, multiple events can be selected by the mapped action (e.g. event click) while holding the Ctrl key.

You can also use a rectangle selection mode to select multiple events using Shit + drag.

Highlighting the selected events (CSS)

The selected events will be marked with *_selected CSS class.

See also

• Scheduler CSS

Sample CSS style (scheduler_white theme)

.css

.scheduler_white_selected .scheduler_white_event_inner
{
  background: #ddd;
}

Client-side API

You can select or unselect events manually using the client-side API.

• DayPilot.Scheduler.multiselect.add()

• DayPilot.Scheduler.multiselect.clear()

• DayPilot.Scheduler.multiselect.get()

• DayPilot.Scheduler.multiselect.redraw()

• DayPilot.Scheduler.multiselect.remove(e)

JavaScript

Select an event using JavaScript:

<div id="scheduler"></div>
<script>
  const scheduler = new DayPilot.Scheduler("scheduler", {
    // ... config
  });
  
  scheduler.init();

  const selectedEvent = scheduler.events.find("123");
  scheduler.multiselect.add(selectedEvent);
</script>

Enable event multi-selecting (using Ctrl + click):

<div id="scheduler"></div>
<script>
  const scheduler = new DayPilot.Scheduler("scheduler", {
    eventClickHandling: "Select",
    allowMultiSelect: true,
    // ...
  });
  scheduler.init();
</script>

Prevent selection of certain events using the onEventSelect event handler:

<div id="scheduler"></div>
<script>
  const scheduler = new DayPilot.Scheduler("scheduler", {
    onEventSelect: (args) => {
      // Prevent selecting events that contain the text "unselectable"
      if (args.selected && args.e.text().includes("unselectable")) {
        args.preventDefault();
      }
    },
    // ...
  });

  scheduler.init();
</script>

Angular

Select an event using a button click:

import { Component, ViewChild } from '@angular/core';
import { DayPilot, DayPilotSchedulerComponent } from 'daypilot-pro-angular';

@Component({
  selector: 'app-scheduler-select',
  template: `
    <daypilot-scheduler 
      [config]="config"
      [events]="events">
    </daypilot-scheduler>
    <button (click)="selectEvent()">Select Event 123</button>
  `
})
export class SchedulerSelectComponent {

  @ViewChild(DayPilotSchedulerComponent)
  scheduler!: DayPilotSchedulerComponent;

  events: DayPilot.EventData[] = [
    {
      id: 123,
      text: "Sample Event",
      start: "2026-02-13T09:00:00",
      end: "2026-02-13T10:00:00"
    },
    // ...
  ];

  config: DayPilot.SchedulerConfig = {
    // Additional config options if needed
  };

  selectEvent(): void {
    const foundEvent = this.scheduler.control.events.find(123);
    if (foundEvent) {
      this.scheduler.control.multiselect.add(foundEvent);
    }
  }
}

Enable event multi-selecting (using Ctrl + click):

import { Component } from '@angular/core';
import { DayPilot } from 'daypilot-pro-angular';

@Component({
  selector: 'app-scheduler-multiselect',
  template: `
    <daypilot-scheduler
      [config]="config"
      [events]="events">
    </daypilot-scheduler>
  `
})
export class SchedulerMultiselectComponent {

  events: DayPilot.EventData[] = [
    {
      id: "1",
      text: "Event 1",
      start: "2026-02-13T09:00:00",
      end: "2026-02-13T10:00:00"
    },
    {
      id: "2",
      text: "Event 2",
      start: "2026-02-13T10:30:00",
      end: "2026-02-13T11:30:00"
    }
  ];

  config: DayPilot.SchedulerConfig = {
    eventClickHandling: "Select",
    allowMultiSelect: true,
    // ...
  };

}

Prevent selecting certain events:

import { Component } from '@angular/core';
import { DayPilot } from 'daypilot-pro-angular';

@Component({
  selector: 'app-scheduler-noselect',
  template: `
    <daypilot-scheduler
      [config]="config"
      [events]="events">
    </daypilot-scheduler>
  `
})
export class SchedulerNoSelectComponent {

  events: DayPilot.EventData[] = [
    {
      id: "1",
      text: "Normal Event",
      start: "2026-02-13T09:00:00",
      end: "2026-02-13T10:00:00"
    },
    {
      id: "2",
      text: "unselectable event",
      start: "2026-02-13T10:30:00",
      end: "2026-02-13T11:30:00"
    }
  ];

  config: DayPilot.SchedulerConfig = {
    onEventSelect: (args) => {
      // Prevent selecting events whose text includes "unselectable"
      if (args.selected && args.e.text().includes("unselectable")) {
        args.preventDefault();
      }
    },
    // ...
  };

}

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  EventClickHandling="Select"
  AllowMultiSelect="true"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.Select,
  AllowMultiSelect = false
})

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.Select,
  EventSelectHandling = EventSelectHandlingType.CallBack
})

protected override void OnEventSelect(EventSelectArgs e)
{
  if (e.Event.Value == "1" && e.Change == EventSelectChange.Selected)
  {
    SelectedEvents.Add(EventInfo.Create("13"));  // add another event to the selection when event 1 was selected
  }
  Update();
}