javascript event calendar column moving drag and drop

In the resource calendar mode, it is possible to enable moving of calendar columns using drag and drop.

  • It works with the calendar column header hierarchy. However, you can also use it with a flat column structure.
  • It can be used in combination with column resizing.
  • You can move the column to any target position (before or after another column; as a child of another column).
  • Target positions that would lead to inconsistent results are forbidden automatically (e.g. to move a column to its own descendant).
  • You can customize the logic by forbidding specified target position or source/target combinations.

This feature is available since version 2022.3.5381.

How It Works

  • Column moving needs to be enabled using columnMoveHandling property (se the value to "Update").
  • It is possible to implement custom rules that will be resolved in real time (during moving) using onColumnMoving event.
  • The calendar will fire onColumnMove and onColumnMoved events when you drop the column at the target location. The position is determined using args.source,, and args.position (“before”, “after”, “child”) properties.
  • When you use automatic header levels (headerLevels = "Auto") the calendar will automatically adjust the displayed header hierarchy depth.
  • The calendar automatically updates the columns.list array. The new hierarchy is available in onEventMoved event handler.
  • You can limit the target column position to the same level using columnMoveSameLevelOnly property.

CSS Styling

The drag handle is marked with calendar_default_colmove_handle CSS class.

The source column is marked with calendar_default_colmove_source CSS class during dragging.

The target position icons use the following CSS classes:

  • calendar_default_colmove_position_before
  • calendar_default_colmove_position_after
  • calendar_default_colmove_position_child
  • calendar_default_colmove_position_forbidden