Row Selecting

Users can select one or more rows if row selecting is enabled:

• Enable row selecting by setting either rowClickHandling or rowDoubleClickHandling to "Select".

• Individual rows can be selected using Ctrl + click.

• A range of rows can be selected using Shift + click.

You can also modify the row selection programmatically.

Ctrl + Click

You can add rows to the selection using Ctrl + click.

Ctrl + click on a selected row will remove it from the selection.

Shift + Click

Use Shift + click to select a range of rows. 

1. The start of the range is the row that was clicked last (without Shift). If nothing was clicked yet, it uses the first row as the start.

2. It fires onRowSelect and onRowSelected events (JavaScript). The last clicked row will be passed as args.row. The newly selected range is only available in onRowSelected and you can read it using rows.selection.get().

CSS

The selected rows are highlighted using CSS:

• *_rowheader_selected class will be added to the row header cells (scheduler_default_rowheader_selected class for the default theme)

• *_cell_selected class will be added to all grid cells that belong to the selected row (scheduler_default_cell_selected for the default theme)

JavaScript

Detecting a selection change:

dp.rowClickHandling = "Select";
dp.onRowSelected = function(args) {
  var msg = "This row was " + (args.selected ? "" : "de") + "selected: " + args.row.name;
  dp.message(msg);
};

Getting current selection:

var array = dp.rows.selection.get();

Selecting a row using JavaScript:

var row = dp.rows.find("A");
dp.rows.selection.add(row);

Setting rows to be selected during Scheduler initialization:

var dp = new DayPilot.Scheduler("dp");
dp.selectedRows = ["A", "B"];
// ...
dp.init();

Clearing the row selection:

dp.rows.selection.clear();

API

• rows.selection.add(row)

• rows.selection.clear()

• rows.selection.get()

• rows.selection.isSelected(row)

• rows.selection.remove(row)

Demo

• Row Selecting Demo [javascript.daypilot.org]

Tutorial

• JavaScript Scheduler: Using Checkboxes to Select Rows

API: rowClickHandling.

Click resource headers, then use Show selected rooms to display their names. The button reads rows.selection.get() and escapes the labels before displaying the dialog.

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

Angular

The button method queries the row-selection API through this.scheduler.control, obtained with @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 selected rooms</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"}],
    rowClickHandling: "Select"
  };
  async action0() {
    const dp = this.scheduler.control;
    await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(dp.rows.selection.get().map(row => row.name).join(", ") || "No rooms selected"));
  }
}

Tutorial

• Angular Scheduler: Row Searching Tutorial

React

Capture the Scheduler API with controlRef and query its current row selection when the button is clicked.

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.rows.selection.get().map(row => row.name).join(", ") || "No rooms selected"));
  }
  return <div>
    <button onClick={action0}>Show selected rooms</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"}]}
      rowClickHandling={"Select"}
    />
  </div>;
}

Vue

The @click function reads the selection from scheduler.value.control using the component's template ref.

<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 rowClickHandling = "Select";
async function action0() {
  const dp = scheduler.value.control;
  await DayPilot.Modal.alert(DayPilot.Util.escapeHtml(dp.rows.selection.get().map(row => row.name).join(", ") || "No rooms selected"));
}
</script>

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

<DayPilot:DayPilotScheduler 
  ...  
  RowSelectHandling="CallBack"
  RowClickHandling="Select" 
  OnRowSelect="DayPilotScheduler1_OnRowSelect"
  ...
  />

protected void DayPilotScheduler1_OnRowSelect(object sender, RowSelectEventArgs e)
{
  DayPilotScheduler1.UpdateWithMessage("Number of selected rows: " + DayPilotScheduler1.SelectedRows.Count);
  DayPilotScheduler1.Update(CallBackUpdateType.None);
}