Row Height

By default, the height of Scheduler rows is determined by the eventHeight property and the maximum number of overlapping events in the row. That means that when you add new concurrent events the height will increase automatically.

Single Event

Two Overlapping Events

Row Margin

You can set custom top and/or bottom row margin (in pixels):

1. Global settings: rowMarginBottom, rowMarginTop properties of the Scheduler component

2. Per row: marginBottom, marginTop properties of the resource object.

Minimum Row Height

You can specify a minimum row height globally using rowMinHeight property (in pixels) or per row using minHeight property of the Scheduler resource object.

JavaScript

In the JavaScript Scheduler, use rowMinHeight, rowMarginTop, and rowMarginBottom properties. You can also override these global values for individual rows using resources array items.

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp", {
    // ...
    rowMinHeight: 60,
  });
  dp.init();
</script>

You can specify custom eventHeight value for rows with no events. This will set the row height accordingly.

dp.resources = [
  { name: "Group1", id:"G1", eventHeight: 20}
];

API: rowMinHeight.

The examples set rowMinHeight to 60 pixels. This is a minimum, including for empty rows; rows can still grow to accommodate stacked events.

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"}],
    rowMinHeight: 60
  };

}

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"}]}
      rowMinHeight={60}
    />
  </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 rowMinHeight = 60;

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  RowMinHeight = "60"
/>

@Html.DayPilotScheduler("dps_rowheadercolumns", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  Resources = new ResourceCollection {
    new Resource("Room B", "B"),
    new Resource{Name = "Room C", Id = "C", MinHeight = 60 },
    new Resource{Name = "Room D", Id = "D", MarginBottom = 5 },
  }
})