react-big-schedule 5.4.10-beta.2 → 5.5.0

package/dist/components/AgendaResourceEvents.js

@@ -97,6 +97,8 @@ AgendaResourceEvents.propTypes = {
   viewEvent2Click: _propTypes["default"].func,
   viewEvent2Text: _propTypes["default"].string,
   slotClickedFunc: _propTypes["default"].func,
-  slotItemTemplateResolver: _propTypes["default"].func
+  slotItemTemplateResolver: _propTypes["default"].func,
+  eventItemTemplateResolver: _propTypes["default"].func,
+  eventItemPopoverTemplateResolver: _propTypes["default"].func
 };
 var _default = exports["default"] = AgendaResourceEvents;

package/dist/components/ResourceEvents.js

@@ -47,6 +47,15 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
     var _this;
     _classCallCheck(this, ResourceEvents);
     _this = _callSuper(this, ResourceEvents, [props]);
+    _defineProperty(_this, "cleanupDragInteraction", function () {
+      document.documentElement.removeEventListener('touchmove', _this.doDrag, false);
+      document.documentElement.removeEventListener('touchend', _this.stopDrag, false);
+      document.documentElement.removeEventListener('touchcancel', _this.cancelDrag, false);
+      document.documentElement.removeEventListener('mousemove', _this.doDrag, false);
+      document.documentElement.removeEventListener('mouseup', _this.stopDrag, false);
+      document.onselectstart = null;
+      document.ondragstart = null;
+    });
     _defineProperty(_this, "supportTouchHelper", function () {
       var evType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'add';
       var ev = evType === 'add' ? _this.eventContainer.addEventListener : _this.eventContainer.removeEventListener;
@@ -78,13 +87,23 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
       var left = leftIndex * cellWidth;
       var rightIndex = Math.ceil(startX / cellWidth);
       var width = (rightIndex - leftIndex) * cellWidth;
+
+      // Get the row index of this resource
+      var startRowIndex = _this.getResourceRowIndex(resourceEvents.slotId);
       _this.setState({
         startX: startX,
         left: left,
         leftIndex: leftIndex,
         width: width,
         rightIndex: rightIndex,
-        isSelecting: true
+        isSelecting: true,
+        originalStartRowIndex: startRowIndex,
+        startRowIndex: startRowIndex,
+        endRowIndex: startRowIndex // Initially same as start
+      });
+      _this.emitSelectionChange(true, _this.getSelectedResourceIds(startRowIndex, startRowIndex), {
+        left: left,
+        width: width
       });
       if (_this.supportTouch) {
         document.documentElement.addEventListener('touchmove', _this.doDrag, false);
@@ -110,7 +129,9 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
       if (toReturn) {
         return;
       }
-      var startX = _this.state.startX;
+      var _this$state = _this.state,
+        startX = _this$state.startX,
+        originalStartRowIndex = _this$state.originalStartRowIndex;
       var schedulerData = _this.props.schedulerData;
       var headers = schedulerData.headers;
       var cellWidth = schedulerData.getContentCellWidth();
@@ -122,12 +143,51 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
       var rightIndex = Math.ceil(Math.max(startX, currentX) / cellWidth);
       rightIndex = rightIndex > headers.length ? headers.length : rightIndex;
       var width = (rightIndex - leftIndex) * cellWidth;
+
+      // Calculate current row based on per-row heights (not a uniform row height assumption).
+      var clientY = ev.clientY;
+      if (_this.supportTouch && ev.changedTouches && ev.changedTouches.length > 0) {
+        clientY = ev.changedTouches[0].clientY;
+      }
+      var currentY = clientY - pos.y;
+      var displayRenderData = _this.getDisplayRenderData();
+      var rowHeights = displayRenderData.map(function (row) {
+        return (row === null || row === void 0 ? void 0 : row.rowHeight) || 50;
+      });
+      var startRowTop = rowHeights.slice(0, Math.max(0, originalStartRowIndex)).reduce(function (sum, h) {
+        return sum + h;
+      }, 0);
+      var absoluteY = startRowTop + currentY;
+      var cumulativeHeight = 0;
+      var currentRowIndex = rowHeights.length - 1;
+      for (var i = 0; i < rowHeights.length; i += 1) {
+        cumulativeHeight += rowHeights[i];
+        if (absoluteY < cumulativeHeight) {
+          currentRowIndex = i;
+          break;
+        }
+      }
+      if (absoluteY < 0) {
+        currentRowIndex = 0;
+      }
+      var minRowIndex = Math.min(originalStartRowIndex, currentRowIndex);
+      var maxRowIndex = Math.max(originalStartRowIndex, currentRowIndex);
+
+      // Clamp to valid row indices
+      var clampedMinRow = Math.max(0, minRowIndex);
+      var clampedMaxRow = Math.min(displayRenderData.length - 1, maxRowIndex);
       _this.setState({
         leftIndex: leftIndex,
         left: left,
         rightIndex: rightIndex,
         width: width,
-        isSelecting: true
+        isSelecting: true,
+        startRowIndex: clampedMinRow,
+        endRowIndex: clampedMaxRow
+      });
+      _this.emitSelectionChange(true, _this.getSelectedResourceIds(clampedMinRow, clampedMaxRow), {
+        left: left,
+        width: width
       });
     });
     _defineProperty(_this, "dragHelper", function (ev, dragType) {
@@ -145,7 +205,8 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
       return [clientX, false];
     });
     _defineProperty(_this, "stopDrag", function (ev) {
-      ev.stopPropagation();
+      var _schedulerData$getRes;
+      if (ev !== null && ev !== void 0 && ev.stopPropagation) ev.stopPropagation();
       var _this$props = _this.props,
         schedulerData = _this$props.schedulerData,
         newEvent = _this$props.newEvent,
@@ -155,40 +216,68 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
         config = schedulerData.config,
         cellUnit = schedulerData.cellUnit,
         localeDayjs = schedulerData.localeDayjs;
-      var _this$state = _this.state,
-        leftIndex = _this$state.leftIndex,
-        rightIndex = _this$state.rightIndex;
-      if (_this.supportTouch) {
-        document.documentElement.removeEventListener('touchmove', _this.doDrag, false);
-        document.documentElement.removeEventListener('touchend', _this.stopDrag, false);
-        document.documentElement.removeEventListener('touchcancel', _this.cancelDrag, false);
-      } else {
-        document.documentElement.removeEventListener('mousemove', _this.doDrag, false);
-        document.documentElement.removeEventListener('mouseup', _this.stopDrag, false);
+      var _this$state2 = _this.state,
+        leftIndex = _this$state2.leftIndex,
+        rightIndex = _this$state2.rightIndex;
+      _this.cleanupDragInteraction();
+      if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
+        _this.setState({
+          startX: 0,
+          leftIndex: 0,
+          left: 0,
+          rightIndex: 0,
+          width: 0,
+          isSelecting: false,
+          originalStartRowIndex: -1,
+          startRowIndex: -1,
+          endRowIndex: -1
+        });
+        _this.emitSelectionChange(false, [], {
+          left: 0,
+          width: 0
+        });
+        return;
       }
-      document.onselectstart = null;
-      document.ondragstart = null;
-      var startTime = headers[leftIndex].time;
-      var endTime = resourceEvents.headerItems[rightIndex - 1].end;
+      var maxLeftIndex = headers.length - 1;
+      var safeLeftIndex = Math.max(0, Math.min(leftIndex, maxLeftIndex));
+      var maxRightIndex = Math.min(headers.length, resourceEvents.headerItems.length);
+      var safeRightIndex = Math.max(1, rightIndex, safeLeftIndex + 1);
+      safeRightIndex = Math.min(safeRightIndex, maxRightIndex);
+      var startTime = headers[safeLeftIndex].time;
+      var endTime = resourceEvents.headerItems[safeRightIndex - 1].end;
       if (cellUnit !== _default2.CellUnit.Hour) {
-        endTime = localeDayjs(new Date(resourceEvents.headerItems[rightIndex - 1].start)).hour(23).minute(59).second(59).format(_default2.DATETIME_FORMAT);
+        endTime = localeDayjs(new Date(resourceEvents.headerItems[safeRightIndex - 1].start)).hour(23).minute(59).second(59).format(_default2.DATETIME_FORMAT);
       }
-      var slotId = resourceEvents.slotId;
-      var slotName = resourceEvents.slotName;
+
+      // Get selected resource IDs
+      var selectedResourceIds = _this.getSelectedResourceIds();
+      var slotId = selectedResourceIds.length > 0 ? selectedResourceIds[0] : resourceEvents.slotId;
+      var slotName = selectedResourceIds.length > 0 ? ((_schedulerData$getRes = schedulerData.getResourceById(slotId)) === null || _schedulerData$getRes === void 0 ? void 0 : _schedulerData$getRes.name) || slotId : resourceEvents.slotName;
       _this.setState({
         startX: 0,
         leftIndex: 0,
         left: 0,
         rightIndex: 0,
         width: 0,
-        isSelecting: false
+        isSelecting: false,
+        originalStartRowIndex: -1,
+        startRowIndex: -1,
+        endRowIndex: -1
+      });
+      _this.emitSelectionChange(false, [], {
+        left: 0,
+        width: 0
       });
       var hasConflict = false;
       if (config.checkConflict) {
         var start = localeDayjs(new Date(startTime));
         var end = localeDayjs(endTime);
         events.forEach(function (e) {
-          if (schedulerData._getEventSlotId(e) === slotId) {
+          var eventResourceIds = e.resourceIds || [e.resourceId];
+          var hasOverlap = selectedResourceIds.some(function (selectedId) {
+            return eventResourceIds.includes(selectedId);
+          });
+          if (hasOverlap) {
             var eStart = localeDayjs(e.start);
             var eEnd = localeDayjs(e.end);
             if (start >= eStart && start < eEnd || end > eStart && end <= eEnd || eStart >= start && eStart < end || eEnd > start && eEnd <= end) hasConflict = true;
@@ -202,6 +291,10 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
             id: undefined,
             start: startTime,
             end: endTime,
+            resourceId: slotId,
+            // Keep for backward compatibility
+            resourceIds: selectedResourceIds,
+            // Add multi-resource support
             slotId: slotId,
             slotName: slotName,
             title: undefined
@@ -209,25 +302,40 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
         } else {
           console.log('Conflict occurred, set conflictOccurred func in Scheduler to handle it');
         }
-      } else if (newEvent !== undefined) newEvent(schedulerData, slotId, slotName, startTime, endTime);
+      } else if (newEvent !== undefined) {
+        // Pass resourceIds for multi-resource events
+        newEvent(schedulerData, slotId, slotName, startTime, endTime, undefined, {
+          resourceIds: selectedResourceIds.length > 1 ? selectedResourceIds : undefined
+        });
+      }
     });
     _defineProperty(_this, "cancelDrag", function (ev) {
-      ev.stopPropagation();
+      if (ev !== null && ev !== void 0 && ev.stopPropagation) ev.stopPropagation();
       var isSelecting = _this.state.isSelecting;
       if (isSelecting) {
-        document.documentElement.removeEventListener('touchmove', _this.doDrag, false);
-        document.documentElement.removeEventListener('touchend', _this.stopDrag, false);
-        document.documentElement.removeEventListener('touchcancel', _this.cancelDrag, false);
-        document.onselectstart = null;
-        document.ondragstart = null;
+        _this.cleanupDragInteraction();
         _this.setState({
           startX: 0,
           leftIndex: 0,
           left: 0,
           rightIndex: 0,
           width: 0,
-          isSelecting: false
+          isSelecting: false,
+          originalStartRowIndex: -1,
+          startRowIndex: -1,
+          endRowIndex: -1
         });
+        _this.emitSelectionChange(false, [], {
+          left: 0,
+          width: 0
+        });
+      }
+    });
+    _defineProperty(_this, "emitSelectionChange", function (isSelecting, selectedResourceIds) {
+      var preview = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var onSelectionChange = _this.props.onSelectionChange;
+      if (onSelectionChange) {
+        onSelectionChange(isSelecting, selectedResourceIds, preview);
       }
     });
     _defineProperty(_this, "onAddMoreClick", function (headerItem) {
@@ -262,10 +370,44 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
         dropRef(element);
       }
     });
+    _defineProperty(_this, "getResourceRowIndex", function (slotId) {
+      return _this.getDisplayRenderData().findIndex(function (row) {
+        return row.slotId === slotId;
+      });
+    });
+    _defineProperty(_this, "getDisplayRenderData", function () {
+      var schedulerData = _this.props.schedulerData;
+      return schedulerData.renderData.filter(function (row) {
+        return row.render;
+      });
+    });
+    _defineProperty(_this, "getSelectedResourceIds", function (startOverride, endOverride) {
+      var _this$state3 = _this.state,
+        startRowIndex = _this$state3.startRowIndex,
+        endRowIndex = _this$state3.endRowIndex;
+      var displayRenderData = _this.getDisplayRenderData();
+      var from = startOverride !== undefined ? startOverride : startRowIndex;
+      var to = endOverride !== undefined ? endOverride : endRowIndex;
+      if (from === -1 || to === -1) {
+        return [];
+      }
+      var selectedResourceIds = [];
+      for (var i = from; i <= to; i++) {
+        var row = displayRenderData[i];
+        if (row && !row.groupOnly) {
+          selectedResourceIds.push(row.slotId);
+        }
+      }
+      return selectedResourceIds;
+    });
     _this.state = {
       isSelecting: false,
       left: 0,
-      width: 0
+      width: 0,
+      // Add vertical selection tracking
+      originalStartRowIndex: -1,
+      startRowIndex: -1,
+      endRowIndex: -1
     };
     _this.supportTouch = false; // 'ontouchstart' in window;
     return _this;
@@ -284,18 +426,30 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (prevProps !== this.props) {
-        var schedulerData = this.props.schedulerData;
+      var _prevProps$schedulerD, _this$props$scheduler;
+      var prevCreatable = (_prevProps$schedulerD = prevProps.schedulerData) === null || _prevProps$schedulerD === void 0 || (_prevProps$schedulerD = _prevProps$schedulerD.config) === null || _prevProps$schedulerD === void 0 ? void 0 : _prevProps$schedulerD.creatable;
+      var currentCreatable = (_this$props$scheduler = this.props.schedulerData) === null || _this$props$scheduler === void 0 || (_this$props$scheduler = _this$props$scheduler.config) === null || _this$props$scheduler === void 0 ? void 0 : _this$props$scheduler.creatable;
+      if (prevCreatable !== currentCreatable) {
         this.supportTouchHelper('remove');
-        if (schedulerData.config.creatable) {
+        if (currentCreatable) {
           this.supportTouchHelper();
         }
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cleanupDragInteraction();
+      this.supportTouchHelper('remove');
+      this.emitSelectionChange(false, []);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this$props$selection,
+        _this$props$selection2,
+        _this$props$selection3,
+        _this2 = this;
       var _this$props3 = this.props,
         resourceEvents = _this$props3.resourceEvents,
         schedulerData = _this$props3.schedulerData,
@@ -305,10 +459,12 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
         endDate = schedulerData.endDate,
         config = schedulerData.config,
         localeDayjs = schedulerData.localeDayjs;
-      var _this$state2 = this.state,
-        isSelecting = _this$state2.isSelecting,
-        left = _this$state2.left,
-        width = _this$state2.width;
+      var _this$state4 = this.state,
+        isSelecting = _this$state4.isSelecting,
+        left = _this$state4.left,
+        width = _this$state4.width,
+        startRowIndex = _this$state4.startRowIndex,
+        endRowIndex = _this$state4.endRowIndex;
       var cellWidth = schedulerData.getContentCellWidth();
       var cellMaxEvents = schedulerData.getCellMaxEvents();
       var rowWidth = schedulerData.getContentTableWidth();
@@ -317,6 +473,20 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
         left: left,
         width: width
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+      var sharedSelecting = (_this$props$selection = this.props.selectionPreview) === null || _this$props$selection === void 0 ? void 0 : _this$props$selection.isSelecting;
+      var isSharedSelectedRow = sharedSelecting && this.props.isRowSelected;
+      var sharedLeft = ((_this$props$selection2 = this.props.selectionPreview) === null || _this$props$selection2 === void 0 ? void 0 : _this$props$selection2.left) || 0;
+      var sharedWidth = ((_this$props$selection3 = this.props.selectionPreview) === null || _this$props$selection3 === void 0 ? void 0 : _this$props$selection3.width) || 0;
+      var sharedSelectedArea = !isSelecting && isSharedSelectedRow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedArea["default"], {
+        schedulerData: schedulerData,
+        left: sharedLeft,
+        width: sharedWidth
+      }) : null;
+
+      // Add vertical selection overlay
+      var verticalSelectionOverlay = isSelecting && startRowIndex !== endRowIndex ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "vertical-selection-overlay"
+      }) : null;
       var eventList = [];
       resourceEvents.headerItems.forEach(function (headerItem, index) {
         if (headerItem.count > 0 || headerItem.summary !== undefined) {
@@ -373,6 +543,7 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
                 _width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
               }
               var top = marginTop + idx * config.eventItemLineHeight;
+              var eventKey = "".concat(evt.eventItem.id, "_").concat(resourceEvents.slotId, "_").concat(index);
               var eventItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_EventItem["default"], {
                 schedulerData: schedulerData,
                 eventItem: evt.eventItem,
@@ -398,7 +569,7 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
                 updateEventEnd: _this2.props.updateEventEnd,
                 moveEvent: _this2.props.moveEvent,
                 conflictOccurred: _this2.props.conflictOccurred
-              });
+              }, eventKey);
               eventList.push(eventItem);
             }
           });
@@ -414,9 +585,6 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
               width: _width2,
               top: top,
               clickAction: _this2.onAddMoreClick
-              // Any specific AddMore requirements
-              ,
-              onSetAddMoreState: _this2.props.onSetAddMoreState
             });
             eventList.push(addMoreItem);
           }
@@ -442,7 +610,7 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
         style: {
           height: resourceEvents.rowHeight
         },
-        children: [selectedArea, eventList]
+        children: [selectedArea, sharedSelectedArea, verticalSelectionOverlay, eventList]
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
@@ -473,13 +641,22 @@ _defineProperty(ResourceEvents, "propTypes", {
   viewEvent2Click: _propTypes.PropTypes.func,
   viewEvent2Text: _propTypes.PropTypes.string,
   newEvent: _propTypes.PropTypes.func,
-  eventItemTemplateResolver: _propTypes.PropTypes.func
+  eventItemTemplateResolver: _propTypes.PropTypes.func,
+  onSelectionChange: _propTypes.PropTypes.func,
+  isRowSelected: _propTypes.PropTypes.bool,
+  selectionPreview: _propTypes.PropTypes.object
 });
 var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
   var schedulerData = props.schedulerData,
     dndContext = props.dndContext;
   var config = schedulerData.config;
   var componentRef = _react["default"].useRef(null);
+  var propsRef = _react["default"].useRef(props);
+
+  // Keep propsRef up to date
+  _react["default"].useEffect(function () {
+    propsRef.current = props;
+  }, [props]);
 
   // Always call useDrop unconditionally (Rules of Hooks)
   // Disable functionality when drag and drop is not enabled
@@ -500,13 +677,13 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
       return {
         accept: _toConsumableArray(dndContext.sourceMap.keys()),
         drop: function drop(item, monitor) {
-          return spec.drop(props, monitor, componentRef.current);
+          return spec.drop(propsRef.current, monitor, componentRef.current);
         },
         hover: function hover(item, monitor) {
-          return spec.hover(props, monitor, componentRef.current);
+          return spec.hover(propsRef.current, monitor, componentRef.current);
         },
         canDrop: function canDrop(item, monitor) {
-          return spec.canDrop(props, monitor);
+          return spec.canDrop(propsRef.current, monitor);
         },
         collect: function collect(monitor) {
           return {
@@ -515,7 +692,7 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
           };
         }
       };
-    }, [props, dndContext, config.dragAndDropEnabled]),
+    }, [dndContext, config.dragAndDropEnabled]),
     _useDrop2 = _slicedToArray(_useDrop, 2),
     _useDrop2$ = _useDrop2[0],
     isOver = _useDrop2$.isOver,
@@ -530,4 +707,4 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
   }));
 };
 ResourceEventsWithDnD.displayName = 'ResourceEventsWithDnD';
-var _default = exports["default"] = ResourceEventsWithDnD;
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(ResourceEventsWithDnD);

package/dist/components/ResourceView.js

@@ -37,7 +37,9 @@ function ResourceView(_ref) {
     slotClickedFunc = _ref.slotClickedFunc,
     slotItemTemplateResolver = _ref.slotItemTemplateResolver,
     toggleExpandFunc = _ref.toggleExpandFunc,
-    CustomResourceCell = _ref.CustomResourceCell;
+    CustomResourceCell = _ref.CustomResourceCell,
+    isSelecting = _ref.isSelecting,
+    selectedResourceIds = _ref.selectedResourceIds;
   var renderData = schedulerData.renderData;
   var width = schedulerData.getResourceTableWidth() - 2;
   var paddingBottom = contentScrollbarHeight;
@@ -64,8 +66,20 @@ function ResourceView(_ref) {
     indents.push(indent);
     var tdStyle = {
       height: item.rowHeight,
-      backgroundColor: item.groupOnly ? schedulerData.config.groupOnlySlotColor : undefined
+      backgroundColor: item.groupOnly ? schedulerData.config.groupOnlySlotColor : undefined,
+      borderLeft: '3px solid transparent'
     };
+    var selectedBorderColor = schedulerData.config.selectedSlotBorderColor || '#1677ff';
+    var selectedShadowColor = schedulerData.config.selectedSlotShadowColor || '#91caff';
+    var selectedSlotColor = schedulerData.config.selectedSlotColor || '#e6f4ff';
+    var isRowSelected = isSelecting && Array.isArray(selectedResourceIds) && selectedResourceIds.includes(item.slotId);
+    if (isRowSelected) {
+      tdStyle.borderLeft = "3px solid ".concat(selectedBorderColor);
+      tdStyle.boxShadow = "inset 0 0 0 1px ".concat(selectedShadowColor);
+      if (!item.groupOnly) {
+        tdStyle.backgroundColor = selectedSlotColor;
+      }
+    }
     if (CustomResourceCell) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
@@ -155,6 +169,8 @@ ResourceView.propTypes = {
   slotClickedFunc: _propTypes["default"].func,
   slotItemTemplateResolver: _propTypes["default"].func,
   toggleExpandFunc: _propTypes["default"].func,
-  CustomResourceCell: _propTypes["default"].func
+  CustomResourceCell: _propTypes["default"].func,
+  isSelecting: _propTypes["default"].bool,
+  selectedResourceIds: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]))
 };
 var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(ResourceView);

package/dist/components/SchedulerData.js

@@ -48,6 +48,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
     this.schedulerHeaderHeight = 0;
     this._shouldReloadViewType = false;
     this.version = 0;
+    this._batchCount = 0;
     this._versionChangeCallback = null;
     this.calendarPopoverLocale = undefined;
     _dayjs["default"].extend(_quarterOfYear["default"]);
@@ -89,11 +90,37 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
     value: function setVersionChangeNotifier(callback) {
       this._versionChangeCallback = typeof callback === 'function' ? callback : null;
     }
+  }, {
+    key: "beginBatch",
+    value: function beginBatch() {
+      this._batchCount = (this._batchCount || 0) + 1;
+    }
+  }, {
+    key: "endBatch",
+    value: function endBatch() {
+      if (this._batchCount === undefined || this._batchCount <= 0) {
+        this._batchCount = 0;
+        console.warn('SchedulerData.endBatch called without a matching beginBatch');
+        return;
+      }
+      if (this._batchCount > 0) {
+        this._batchCount -= 1;
+        if (this._batchCount === 0 && this._pendingVersion !== undefined) {
+          if (typeof this._versionChangeCallback === 'function') {
+            this._versionChangeCallback(this._pendingVersion);
+          }
+          this._pendingVersion = undefined;
+        }
+      }
+    }
   }, {
     key: "bumpVersion",
     value: function bumpVersion() {
       this.version += 1;
-      if (typeof this._versionChangeCallback === 'function') {
+      if (this._batchCount > 0) {
+        // Defer callback until batch ends
+        this._pendingVersion = this.version;
+      } else if (typeof this._versionChangeCallback === 'function') {
         this._versionChangeCallback(this.version);
       }
     }
@@ -158,15 +185,17 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setBesidesWidth",
     value: function setBesidesWidth(besidesWidth) {
-      if (besidesWidth >= 0) {
+      if (besidesWidth >= 0 && this.config.besidesWidth !== besidesWidth) {
         this.config.besidesWidth = besidesWidth;
+        this.bumpVersion();
       }
     }
   }, {
     key: "setUnderneathHeight",
     value: function setUnderneathHeight(underneathHeight) {
-      if (underneathHeight >= 0) {
+      if (underneathHeight >= 0 && this.config.underneathHeight !== underneathHeight) {
         this.config.underneathHeight = underneathHeight;
+        this.bumpVersion();
       }
     }
   }, {
@@ -207,6 +236,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       });
       if (index !== -1) {
         this.eventGroups.splice(index, 1);
+        this._createRenderData();
         this.bumpVersion();
       }
     }
@@ -268,9 +298,23 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       var viewType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _default.ViewType.Week;
       var showAgenda = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var isEventPerspective = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var previousShowAgenda = this.showAgenda;
+      var previousIsEventPerspective = this.isEventPerspective;
       this.showAgenda = showAgenda;
       this.isEventPerspective = isEventPerspective;
-      this.cellUnit = _default.CellUnit.Day;
+      var isCustomView = viewType === _default.ViewType.Custom || viewType === _default.ViewType.Custom1 || viewType === _default.ViewType.Custom2;
+
+      // Force built-in views only; custom views can provide their own cellUnit via custom date behavior.
+      if (viewType === _default.ViewType.Day) {
+        this.cellUnit = _default.CellUnit.Hour;
+      } else if (!isCustomView) {
+        this.cellUnit = _default.CellUnit.Day;
+      }
+
+      // If showAgenda or isEventPerspective changed, force reload
+      if (previousShowAgenda !== showAgenda || previousIsEventPerspective !== isEventPerspective) {
+        this._shouldReloadViewType = true;
+      }
       if (this.viewType !== viewType || this._shouldReloadViewType) {
         var date = this.startDate;
         if (viewType === _default.ViewType.Custom || viewType === _default.ViewType.Custom1 || viewType === _default.ViewType.Custom2) {
@@ -332,7 +376,13 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setSchedulerMaxHeight",
     value: function setSchedulerMaxHeight(newSchedulerMaxHeight) {
-      this.config.schedulerMaxHeight = newSchedulerMaxHeight;
+      if (newSchedulerMaxHeight < 0) {
+        return;
+      }
+      if (this.config.schedulerMaxHeight !== newSchedulerMaxHeight) {
+        this.config.schedulerMaxHeight = newSchedulerMaxHeight;
+        this.bumpVersion();
+      }
     }
   }, {
     key: "isSchedulerResponsive",
@@ -345,6 +395,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       var slotEntered = false;
       var slotIndent = -1;
       var isExpanded = false;
+      var changed = false;
       var expandedMap = new Map();
       this.renderData.forEach(function (item) {
         if (slotEntered === false) {
@@ -352,6 +403,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
             slotEntered = true;
             isExpanded = !item.expanded;
             item.expanded = isExpanded;
+            changed = true;
             slotIndent = item.indent;
             expandedMap.set(item.indent, {
               expanded: item.expanded,
@@ -360,7 +412,11 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
           }
         } else if (item.indent > slotIndent) {
           var expandStatus = expandedMap.get(item.indent - 1);
-          item.render = expandStatus.expanded && expandStatus.render;
+          var newRender = expandStatus.expanded && expandStatus.render;
+          if (item.render !== newRender) {
+            item.render = newRender;
+            changed = true;
+          }
           if (item.hasChildren) {
             expandedMap.set(item.indent, {
               expanded: item.expanded,
@@ -371,7 +427,9 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
           slotEntered = false;
         }
       });
-      this.bumpVersion();
+      if (changed) {
+        this.bumpVersion();
+      }
     }
   }, {
     key: "isResourceViewResponsive",
@@ -931,7 +989,17 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_getEventSlotId",
     value: function _getEventSlotId(event) {
-      return this.isEventPerspective ? this._getEventGroupId(event) : event.resourceId;
+      if (this.isEventPerspective) {
+        return this._getEventGroupId(event);
+      }
+      // Support for multi-resource events
+      if (event.resourceIds && event.resourceIds.length > 0) {
+        // For multi-resource events, return the first resourceId for backward compatibility
+        // The rendering logic will handle showing on multiple rows
+        return event.resourceIds[0];
+      }
+      // Fallback to single resourceId
+      return event.resourceId;
     }
   }, {
     key: "_getEventGroupId",
@@ -1168,9 +1236,10 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
           console.error("Event undefined: ".concat(index));
           throw new Error("Event undefined: ".concat(index));
         }
-        if (e.id === undefined || e.resourceId === undefined || e.title === undefined || e.start === undefined || e.end === undefined) {
-          console.error('Event property missed', index, e);
-          throw new Error("Event property undefined: ".concat(index));
+        var hasResourceTarget = e.resourceId !== undefined || Array.isArray(e.resourceIds) && e.resourceIds.length > 0;
+        if (e.id === undefined || !hasResourceTarget || e.title === undefined || e.start === undefined || e.end === undefined) {
+          console.error('Event property missed (id, resourceId/resourceIds, title, start, end)', index, e);
+          throw new Error("Event property undefined (id/resourceId|resourceIds/title/start/end): ".concat(index));
         }
       });
     }
@@ -1202,42 +1271,54 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       var cellMaxEventsCount = this.getCellMaxEvents();
       var cellMaxEventsCountValue = 30;
       this.events.forEach(function (item) {
-        var resourceEventsList = initRenderData.filter(function (x) {
-          return x.slotId === _this6._getEventSlotId(item);
-        });
-        if (resourceEventsList.length > 0) {
-          var resourceEvents = resourceEventsList[0];
-          var span = _this6._getSpan(item.start, item.end, _this6.headers);
-          var eventStart = new Date(item.start);
-          var eventEnd = new Date(item.end);
-          var pos = -1;
-          resourceEvents.headerItems.forEach(function (header, index) {
-            var headerStart = new Date(header.start);
-            var headerEnd = new Date(header.end);
-            if (headerEnd > eventStart && headerStart < eventEnd) {
-              header.count += 1;
-              if (header.count > resourceEvents.rowMaxCount) {
-                resourceEvents.rowMaxCount = header.count;
-                var rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount ? cellMaxEventsCount : resourceEvents.rowMaxCount;
-                var newRowHeight = rowsCount * _this6.config.eventItemLineHeight + (_this6.config.creatable && _this6.config.checkConflict === false ? 20 : 2);
-                if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
-              }
-              if (pos === -1) {
-                var tmp = 0;
-                while (header.events[tmp] !== undefined) tmp += 1;
-                pos = tmp;
-              }
-              var render = headerStart <= eventStart || index === 0;
-              if (render === false) {
-                var previousHeader = resourceEvents.headerItems[index - 1];
-                var previousHeaderStart = new Date(previousHeader.start);
-                var previousHeaderEnd = new Date(previousHeader.end);
-                if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
-              }
-              header.events[pos] = _this6._createHeaderEvent(render, span, item);
-            }
-          });
+        var targetSlotIds = [];
+        if (_this6.isEventPerspective) {
+          targetSlotIds = [_this6._getEventSlotId(item)];
+        } else if (item.resourceIds && item.resourceIds.length > 0) {
+          // Multi-resource event
+          targetSlotIds = item.resourceIds;
+        } else if (item.resourceId) {
+          // Single resource event (backward compatibility)
+          targetSlotIds = [item.resourceId];
         }
+        targetSlotIds.forEach(function (slotId) {
+          var resourceEventsList = initRenderData.filter(function (x) {
+            return x.slotId === slotId;
+          });
+          if (resourceEventsList.length > 0) {
+            var resourceEvents = resourceEventsList[0];
+            var span = _this6._getSpan(item.start, item.end, _this6.headers);
+            var eventStart = new Date(item.start);
+            var eventEnd = new Date(item.end);
+            var pos = -1;
+            resourceEvents.headerItems.forEach(function (header, index) {
+              var headerStart = new Date(header.start);
+              var headerEnd = new Date(header.end);
+              if (headerEnd > eventStart && headerStart < eventEnd) {
+                header.count += 1;
+                if (header.count > resourceEvents.rowMaxCount) {
+                  resourceEvents.rowMaxCount = header.count;
+                  var rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount ? cellMaxEventsCount : resourceEvents.rowMaxCount;
+                  var newRowHeight = rowsCount * _this6.config.eventItemLineHeight + (_this6.config.creatable && _this6.config.checkConflict === false ? 20 : 2);
+                  if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
+                }
+                if (pos === -1) {
+                  var tmp = 0;
+                  while (header.events[tmp] !== undefined) tmp += 1;
+                  pos = tmp;
+                }
+                var render = headerStart <= eventStart || index === 0;
+                if (render === false) {
+                  var previousHeader = resourceEvents.headerItems[index - 1];
+                  var previousHeaderStart = new Date(previousHeader.start);
+                  var previousHeaderEnd = new Date(previousHeader.end);
+                  if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
+                }
+                header.events[pos] = _this6._createHeaderEvent(render, span, item);
+              }
+            });
+          }
+        });
       });
       if (cellMaxEventsCount <= cellMaxEventsCountValue || this.behaviors.getSummaryFunc !== undefined) {
         initRenderData.forEach(function (resourceEvents) {

package/dist/components/index.js

@@ -229,9 +229,43 @@ function Scheduler(props) {
     _useState0 = _slicedToArray(_useState9, 2),
     resourceScrollbarWidth = _useState0[0],
     setResourceScrollbarWidth = _useState0[1];
-  var _useState1 = (0, _react.useState)(0),
+  var _useState1 = (0, _react.useState)({
+      isSelecting: false,
+      selectedResourceIds: [],
+      left: 0,
+      width: 0
+    }),
     _useState10 = _slicedToArray(_useState1, 2),
-    setRenderTrigger = _useState10[1];
+    selectionState = _useState10[0],
+    setSelectionState = _useState10[1];
+  var _useState11 = (0, _react.useState)(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    setRenderTrigger = _useState12[1];
+
+  // Callback ref pattern for ResizeObserver to handle parent element reassignment
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    parentEl = _useState14[0],
+    setParentEl = _useState14[1];
+  var setParentRef = (0, _react.useCallback)(function (el) {
+    if (parentRef) {
+      parentRef.current = el;
+    }
+    setParentEl(el);
+  }, [parentRef]);
+
+  // Layout/header refs - declare before setSchedulerHeaderRef useCallback
+  var schedulerHeaderRef = (0, _react.useRef)(null);
+
+  // Callback ref pattern for ResizeObserver to handle schedulerHeader element reassignment
+  var _useState15 = (0, _react.useState)(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    schedulerHeaderEl = _useState16[0],
+    setSchedulerHeaderEl = _useState16[1];
+  var setSchedulerHeaderRef = (0, _react.useCallback)(function (el) {
+    schedulerHeaderRef.current = el;
+    setSchedulerHeaderEl(el);
+  }, []);
 
   // Scroll sync refs
   var schedulerHeadRef = (0, _react.useRef)(null);
@@ -239,9 +273,6 @@ function Scheduler(props) {
   var schedulerContentRef = (0, _react.useRef)(null);
   var schedulerContentBgTableRef = (0, _react.useRef)(null);
 
-  // Layout/header refs
-  var schedulerHeaderRef = (0, _react.useRef)(null);
-
   // Observer refs
   var ulObserverRef = (0, _react.useRef)(null);
   var headerObserverRef = (0, _react.useRef)(null);
@@ -280,26 +311,31 @@ function Scheduler(props) {
     }
   }, [schedulerData, parentRef, onWindowResize]);
   (0, _react.useEffect)(function () {
-    if (parentRef !== undefined && schedulerData.config.responsiveByParent && !!parentRef.current) {
-      schedulerData._setDocumentWidth(parentRef.current.offsetWidth);
+    if (parentRef !== undefined && schedulerData.config.responsiveByParent && !!parentEl) {
+      schedulerData._setDocumentWidth(parentEl.offsetWidth);
+
+      // Disconnect any previous observer to prevent memory leaks
+      if (ulObserverRef.current) {
+        ulObserverRef.current.disconnect();
+      }
       ulObserverRef.current = new ResizeObserver(function () {
-        if (parentRef.current) {
-          schedulerData._setDocumentWidth(parentRef.current.offsetWidth);
-          schedulerData._setDocumentHeight(parentRef.current.offsetHeight);
+        if (parentEl) {
+          schedulerData._setDocumentWidth(parentEl.offsetWidth);
+          schedulerData._setDocumentHeight(parentEl.offsetHeight);
         }
       });
-      ulObserverRef.current.observe(parentRef.current);
+      ulObserverRef.current.observe(parentEl);
       return function () {
-        if (ulObserverRef.current && parentRef.current) {
-          ulObserverRef.current.unobserve(parentRef.current);
+        if (ulObserverRef.current) {
+          ulObserverRef.current.disconnect();
         }
       };
     }
-  }, [parentRef, schedulerData]);
+  }, [parentEl, parentRef, schedulerData]);
   (0, _react.useEffect)(function () {
-    if (schedulerData.config.responsiveByParent && !!schedulerHeaderRef.current) {
-      schedulerData._setDocumentWidth(schedulerHeaderRef.current.offsetWidth);
-      schedulerData._setDocumentHeight(schedulerHeaderRef.current.offsetHeight);
+    if (schedulerData.config.responsiveByParent && !!schedulerHeaderEl) {
+      schedulerData._setDocumentWidth(schedulerHeaderEl.offsetWidth);
+      schedulerData._setDocumentHeight(schedulerHeaderEl.offsetHeight);
       headerObserverRef.current = new ResizeObserver(function (entries) {
         entries.forEach(function (entry) {
           var node = entry.target;
@@ -309,14 +345,14 @@ function Scheduler(props) {
           schedulerData._setSchedulerHeaderHeight(totalHeight);
         });
       });
-      headerObserverRef.current.observe(schedulerHeaderRef.current);
+      headerObserverRef.current.observe(schedulerHeaderEl);
       return function () {
-        if (headerObserverRef.current && schedulerHeaderRef.current) {
-          headerObserverRef.current.unobserve(schedulerHeaderRef.current);
+        if (headerObserverRef.current && schedulerHeaderEl) {
+          headerObserverRef.current.unobserve(schedulerHeaderEl);
         }
       };
     }
-  }, [schedulerHeaderRef, schedulerData]);
+  }, [schedulerHeaderEl, schedulerData]);
   var resolveScrollbarSize = (0, _react.useCallback)(function () {
     var prev = scrollbarSizeRef.current;
     var newContentHeight = schedulerContentRef.current ? schedulerContentRef.current.offsetHeight - schedulerContentRef.current.clientHeight : 17;
@@ -471,6 +507,37 @@ function Scheduler(props) {
     });
   }, [renderData]);
   var eventDndSource = dndContext.getDndSource();
+  var handleSelectionChange = (0, _react.useCallback)(function (isSelecting, selectedResourceIds) {
+    var preview = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var nextSelectedResourceIds = selectedResourceIds || [];
+    var nextLeft = preview.left || 0;
+    var nextWidth = preview.width || 0;
+    setSelectionState(function (prev) {
+      var sameIdsLength = prev.selectedResourceIds.length === nextSelectedResourceIds.length;
+      var sameIds = sameIdsLength && prev.selectedResourceIds.every(function (id, index) {
+        return id === nextSelectedResourceIds[index];
+      });
+      if (prev.isSelecting === isSelecting && prev.left === nextLeft && prev.width === nextWidth && sameIds) {
+        return prev;
+      }
+      return {
+        isSelecting: isSelecting,
+        selectedResourceIds: nextSelectedResourceIds,
+        left: nextLeft,
+        width: nextWidth
+      };
+    });
+  }, []);
+  var selectionPreview = (0, _react.useMemo)(function () {
+    return {
+      isSelecting: selectionState.isSelecting,
+      left: selectionState.left,
+      width: selectionState.width
+    };
+  }, [selectionState.isSelecting, selectionState.left, selectionState.width]);
+  var selectedIdsSet = (0, _react.useMemo)(function () {
+    return new Set(selectionState.selectedResourceIds);
+  }, [selectionState.selectedResourceIds]);
   var resourceEventsList = (0, _react.useMemo)(function () {
     return displayRenderData.map(function (item) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceEvents["default"], {
@@ -492,10 +559,13 @@ function Scheduler(props) {
         viewEvent2Click: props.viewEvent2Click,
         viewEvent2Text: props.viewEvent2Text,
         newEvent: props.newEvent,
-        eventItemTemplateResolver: props.eventItemTemplateResolver
+        eventItemTemplateResolver: props.eventItemTemplateResolver,
+        onSelectionChange: handleSelectionChange,
+        isRowSelected: selectedIdsSet.has(item.slotId),
+        selectionPreview: selectionPreview
       }, item.slotId);
     });
-  }, [displayRenderData, schedulerData, schedulerDataVersion, eventDndSource, dndContext, props.onSetAddMoreState, props.updateEventStart, props.updateEventEnd, props.moveEvent, props.movingEvent, props.conflictOccurred, props.subtitleGetter, props.eventItemClick, props.viewEventClick, props.viewEventText, props.viewEvent2Click, props.viewEvent2Text, props.newEvent, props.eventItemTemplateResolver]);
+  }, [displayRenderData, schedulerData, schedulerDataVersion, eventDndSource, dndContext, props.onSetAddMoreState, props.updateEventStart, props.updateEventEnd, props.moveEvent, props.movingEvent, props.conflictOccurred, props.subtitleGetter, props.eventItemClick, props.viewEventClick, props.viewEventText, props.viewEvent2Click, props.viewEvent2Text, props.newEvent, props.eventItemTemplateResolver, handleSelectionChange, selectedIdsSet, selectionPreview]);
   var tbodyContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {});
   if (showAgenda) {
     tbodyContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AgendaView["default"], {
@@ -515,7 +585,6 @@ function Scheduler(props) {
     var _config$headerBorderC2, _config$headerBorderC3, _config$weekNumberLab;
     var resourceTableWidth = schedulerData.getResourceTableWidth();
     var schedulerContainerWidth = width - (config.resourceViewEnabled ? resourceTableWidth : 0);
-    var _schedulerWidth = schedulerData.getContentTableWidth() - 1;
     var contentHeight = config.schedulerContentHeight;
     var resourcePaddingBottom = resourceScrollbarHeight === 0 ? contentScrollbarHeight : 0;
     var contentPaddingBottom = contentScrollbarHeight === 0 ? resourceScrollbarHeight : 0;
@@ -582,7 +651,7 @@ function Scheduler(props) {
     };
     var schedulerHeadInnerStyle = {
       paddingRight: "".concat(contentScrollbarWidth, "px"),
-      width: _schedulerWidth + contentScrollbarWidth
+      width: schedulerWidth + contentScrollbarWidth
     };
     tbodyContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
@@ -629,7 +698,9 @@ function Scheduler(props) {
               slotClickedFunc: props.slotClickedFunc,
               slotItemTemplateResolver: props.slotItemTemplateResolver,
               toggleExpandFunc: props.toggleExpandFunc,
-              CustomResourceCell: props.CustomResourceCell
+              CustomResourceCell: props.CustomResourceCell,
+              isSelecting: selectionState.isSelecting,
+              selectedResourceIds: selectionState.selectedResourceIds
             })
           })]
         })
@@ -704,7 +775,7 @@ function Scheduler(props) {
   }, [config.headerEnabled]);
   var schedulerHeader = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SchedulerHeader["default"], {
-      ref: schedulerHeaderRef,
+      ref: setSchedulerHeaderRef,
       style: schedulerHeaderStyle,
       onViewChange: handleViewChange,
       schedulerData: schedulerData,
@@ -724,6 +795,7 @@ function Scheduler(props) {
     id: "rbs-root",
     className: "rbs",
     style: rootTableStyle,
+    ref: setParentRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {

package/dist/css/style.css

@@ -36,6 +36,8 @@
 .rbs {
   margin: 20px auto;
   border-spacing: 0;
+  --selection-bg: rgba(0, 123, 255, 0.1);
+  --selection-border: #007bff;
 }
 
 .rbs td {
@@ -198,6 +200,18 @@
   position: absolute;
 }
 
+.rbs .vertical-selection-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--selection-bg);
+  border: 2px dashed var(--selection-border);
+  pointer-events: none;
+  z-index: 10;
+}
+
 /* Slots and Cells */
 .rbs .slot-cell,
 .rbs .slot-text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "5.4.10-beta.2",
+  "version": "5.5.0",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.2.2",
-    "antd": "^6.3.6",
+    "antd": "^6.3.7",
     "dayjs": "^1.11.20",
     "prop-types": "^15.8.1",
     "react": "^19.2.5",