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, args.target, 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