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, set eventDoubleClickHandling to select "Select"

Selecting multiple events

Multiple event selection can be enabled using the allowMultiSelect property (enabled by default in DayPilot Pro for JavaScript).

• 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 Shift + 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>

API: eventClickHandling.

Click an event, then use Show selection to display its name. The examples enable click selection and inspect it with multiselect.events().

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

The button accesses the selection through this.scheduler.control, obtained using @ViewChild.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Show selection</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    eventClickHandling: "Select"
  };
  async action0() {
    const dp = this.scheduler.control;
    await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(dp.multiselect.events().map(event => event.text()).join(", ") || "Nothing selected"));
  }
}

React

The controlRef callback stores the Scheduler API for the button's selection query.

import React, {useRef} from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(dp.multiselect.events().map(event => event.text()).join(", ") || "Nothing selected"));
  }
  return <div>
    <button onClick={action0}>Show selection</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      eventClickHandling={"Select"}
    />
  </div>;
}

Vue

The click function uses the Scheduler template ref to query scheduler.value.control.multiselect.

<script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const scheduler = ref(null);
const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const eventClickHandling = "Select";
async function action0() {
  const dp = scheduler.value.control;
  await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(dp.multiselect.events().map(event => event.text()).join(", ") || "Nothing selected"));
}
</script>

<template>
  <div>
    <button @click="action0">Show selection</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :eventClickHandling="eventClickHandling"
    />
  </div>
</template>

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