Row Header Active Areas

You can define custom active areas for each row header of the JavaScript Scheduler component.

JavaScript

Use onBeforeRowHeaderRender event handler to define active areas:

<div id="dp"></div>
<script>

  const dp = new DayPilot.Scheduler("dp");
  // ...
  dp.resources = [
    { name: "Room A", id: "A" },
    { name: "Room B", id: "B" },
    { name: "Room C", id: "C" }
  ];
  dp.onBeforeRowHeaderRender = function(args) {
     args.row.areas = [
       {
         onClick: (args) => { alert(args.source.id); }, 
         top: 0,
         right: 0,
         width: 17, 
         height: 17, 
         visibility: "Hover", 
         cssClass: "resource_action_menu"
       }
     ];
  };
  dp.init();
</script>

Tutorial

• JavaScript Scheduler: Find Next Free Slot

API: onBeforeRowHeaderRender.

The examples add an information button to each resource header. Its active-area callback displays the row name, escaped for the HTML-capable dialog, without changing the resource.

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

Angular

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  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"}],
    onBeforeRowHeaderRender: args => { args.row.areas = [{right: 4, top: 4, width: 20, height: 20, text: "i", action: "None", onClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.source.name)); }}]; }
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      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"}]}
      onBeforeRowHeaderRender={args => { args.row.areas = [{right: 4, top: 4, width: 20, height: 20, text: "i", action: "None", onClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.source.name)); }}]; }}
    />
  </div>;
}

Vue

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

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 onBeforeRowHeaderRender = args => { args.row.areas = [{right: 4, top: 4, width: 20, height: 20, text: "i", action: "None", onClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.source.name)); }}]; };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onBeforeRowHeaderRender="onBeforeRowHeaderRender"
    />
  </div>
</template>

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(0).Right(0).Top(0).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.Value);"));
}

protected override void OnBeforeResHeaderRender(BeforeResHeaderRenderArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(0).Right(0).Top(0).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.Value);"));
}