You can define groups of events that will be always moved and/or resized together.
This functionality is similar to selecting multiple events which can be moved and resized at once as well. With joint events, grouping is enforced, eliminating the need for manual selection of each individual event.
Joint events can be in different rows and they can start at different times.
Live Demo
Forced moving of multiple events
To force moving all joint events together, use the jointEventsMove property (it is set to true by default).
General rules applicable to moving multiple events apply here as well:
-
By default, you can only move the events horizontally (on the time axis). It is also possible to enable vertical moving, either for the master event only or for all events (their relative position will be maintained). To set the vertical moving behavior, use the multiMoveVerticalMode property.
-
If the overlap protection is enabled, the overlaps will be checked for all events. The action will be forbidden when it is not possible to safely place all joint events.
-
You can adjust the position of individual events in the group dynamically using the onEventMoving event handler (see also event moving customization).
Forced resizing of multiple events
To force resizing all joint events together, use the joinEventsResize property (it is set to true by default).
General rules applicable to resizing multiple events apply here:
-
Some events may be shorter than the master event and resizing would cause a negative duration. That is checked during resizing and if any of the joints events reaches a zero duration, the operation is marked as forbidden.
How to create a group of joint events
To create a group, use the join property of the event data object. All events with the same join property will belong to the same group.
This property cannot be set using the onBeforeEventRender event.
Visual highlighting of the group
By default, there is no visual hint that events belong to the same group.
You can link the joint events visually, e.g. using links or using a dynamic hover color (tutorial).
Another option would be to display the same icon in all related events or use the same bar color.