html5-javascript-scheduler-auto-cell-width.png

The Scheduler component can calculate the cell width to match the Scheduler width:

  • No horizontal scrollbar is displayed.
  • The available space is filled with content - there is no free space on the right side if the viewport is too wide.
  • The cell width is updated automatically on window resize.

JavaScript

You can enable the auto cell width feature using cellWidthSpec property:

dp.cellWidthSpec = 'Auto';

This mode will calculate the cell width from the Scheduler width on initial load, during update and during window resizing. The calculated with will be stored in cellWidth property.

You can also specify the minimum width (in pixels) using cellWidthMin property:

dp.cellWidthMin = 20;   // default value = 1

Demo

ASP.NET WebForms

CellWidthSpec = "Auto"

Demo

ASP.NET MVC

.CellWidthSpec = Auto

Demo