By default, the JavaScript Calendar component sets the width of columns automatically so they fill the available width. This works in the week view, where the columns are generated automatically for the specified week, and also in the resource-scheduling mode, where the columns display custom resources (rooms, machines, tools, locations, or people).
This behavior can be changed using the columnWidthSpec property. You can change the default responsive mode (columnWidthSpec: "Auto") to a fixed-column mode (columnWidthSpec: "Fixed") and set the column width manually in pixels.
On mobile devices with narrow screens, the automatic mode can result in a calendar view with columns that are too small, and events (especially if there are multiple overlapping events) may become unreadable.
In this case, you can use a hybrid mode, which uses automatic column width but enforces the specified minimum width using the columnWidthMin property:
const calendar = new DayPilot.Calendar("calendar", {
columnWidthSpec: "Auto",
columnWidthMin: 100,
// ...
});
calendar.init();The hybrid mode with columnWidthMin property is supported in the Pro version of the JavaScript edition since version 2024.4.6293.
The total calendar width can be set using the width property. By default, the Calendar uses the whole available width.