javascript calendar column header height

The column header height can be adjusted using the headerHeight property.

By default, column header height auto-fit is enabled. You need to turn it off when customizing the header height.

JavaScript

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

<script type="text/javascript">
  const dp = new DayPilot.Calendar("dp", {
    headerHeightAutoFit: false,
    headerHeight: 30,
    // ...
  });
  dp.init();
</script>

ASP.NET WebForms

 
<DayPilot:DayPilotCalendar
  ...
  HeaderHeight="30"
  ColumnHeaderHeightAutoFit="false"
/>

ASP.NET MVC

 
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  HeaderHeightAutoFit = false,
  HeaderHeight = 30,
  // ...
	
})