Fixed Column Width

By default, the Calendar calculates the column width automatically as a percentage of the total width of the component. When displaying many columns, it may result in very narrow columns that don't show enough space for the events.

You can use the columnWidthSpec: "Fixed" and columnWidth properties to set a fixed column width.

A horizontal scrollbar will be added automatically if necessary.

It works in Resources and Days views (including Day, WorkWeek, and Week views).

JavaScript

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

<script type="text/javascript">
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Days",
    days: 50,
    columnWidthSpec: "Fixed",
    columnWidth: 100,
    // ... 
  });
  dp.init();
</script>

Demo

• http://javascript.daypilot.org/demo/calendar/50columns.html

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  ViewType="Days"
  Days="50"
  ColumnWidthSpec="Fixed"
  ColumnWidth="100"
  ...
/>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Days,
  Days = 50,
  ColumnWidthSpec = ColWidthSpec.Fixed,
  ColumnWidth = 100,
  ...

})