Custom Column Widths

By default, the column width is calculated automatically (columnWidthSpec="Auto") to fill the available horizontal space or is set to a fixed width in pixels (columnWidhtSpec="Fixed").

In the resource calendar mode (which displays custom columns defined using the columns property) it is possible to define a custom width for each column.

If you display a resource column hierarchy, the column widths need to be set for the bottom columns. The width property is ignored for parent columns.

This feature is available since 2022.2.5344.

Auto Column Width

In the auto column width mode (which is the default), each column uses an equal percentage of the total width.

You can override it by specifying a custom value using the width property.

• Columns without a specified width will use the calculated default percentage.
• If the total of the width values for all columns doesn't equal 100 the percentages will be rebalanced automatically.

Example

const dp = new DayPilot.Calendar("dp", {
  viewType: "Resources",
  columnWidthSpec: "Auto",
  columns: [
    { name: "Column 1", id: "1", width: 20 },
    { name: "Column 2", id: "2", width: 20 },  
    { name: "Column 3", id: "3", width: 60 },
  ],
  // ...
});

dp.init();

Fixed Column Width

In the fixed column width mode, the width of all columns is the same and it is determined by the columnWidth property (in pixels).

You can define custom width for all columns (or just some of them). Just set the desired column width using the width property (in pixels).

const dp = new DayPilot.Calendar("dp", {
  viewType: "Resources",
  columnWidthSpec: "Fixed",
  columnWidth: 100,
  columns: [
    { name: "Column 1", id: "1", width: 300 },
    { name: "Column 2", id: "2", width: 200 },  
    { name: "Column 3", id: "3", width: 150 },
  ],
  // ...
});

dp.init();

If the width is not specified for a column, it will use the default value (columnWidth).