javascript event calendar column resizing

In the resource calendar mode, it is possible to specify custom column widths.

In addition, it is possible to enable drag and drop column resizing:

  • It works with fixed column width (the width is specified in pixels) and in auto mode (the width is specified in percent).
  • If you display a hierarchy of columns, the width must be specified for the bottom level.
  • You can resize parents as well - the calendar will resize column children proportionally.
  • In the auto column width mode, the calendar columns on the right will be resized as well so that the total is 100%.
  • It can be used in combination with drag and drop column moving.

This feature is available since version 2022.3.5381.

How it works

  1. Column resizing needs to be enabled using columnResizeHandling property (set the value to "Update").
  2. The calendar will fire onColumnResize and onColumnResized events when you stop dragging the splitter.
  3. In onEventResized handler, you can read the new calendar column widths from columns.list and store them for future use.
  4. The calendar check the minimum width of a column and it will not let you make the column smaller. The minimum width is specified using columnWidthMin property (in pixels).

Demo

Tutorial