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

javascript scheduler row height single event

Two Overlapping Events

javascript scheduler row height 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.

javascript scheduler row margin bottom

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 scheduler row min height

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}
];

ASP.NET WebForms

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

ASP.NET MVC

You can adjust the row height manually using Resource properties.

@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 },
  }
})

Minimum Row Height 

scheduler row minheight

MinHeight = 60

Bottom Margin

scheduler row marginbottom

MarginBottom = 5

Demo