react-big-schedule 8.1.0 → 9.0.0

package/dist/components/ResourceEvents.js

@@ -1,730 +1,561 @@
-import { PropTypes } from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { PureComponent } from 'react';
 import { useDrop } from 'react-dnd';
 import { CellUnit, DATETIME_FORMAT, DnDTypes, SummaryPos } from '../config/default';
+import { toDate } from '../helper/behaviors';
 import { getPos, normalizeEventEnd, normalizeEventStart } from '../helper/utility';
 import AddMore from './AddMore';
 import EventItem from './EventItem';
 import SelectedArea from './SelectedArea';
 import Summary from './Summary';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_ROW_HEIGHT = 50;
+// Drag handlers take the mouse/touch union; DOM listeners are typed for plain Event.
+const asListener = (fn) => fn;
 class ResourceEvents extends PureComponent {
-  static propTypes = {
-    resourceEvents: PropTypes.object.isRequired,
-    schedulerData: PropTypes.object.isRequired,
-    schedulerDataVersion: PropTypes.number,
-    dndSource: PropTypes.object.isRequired,
-    onSetAddMoreState: PropTypes.func,
-    updateEventStart: PropTypes.func,
-    updateEventEnd: PropTypes.func,
-    moveEvent: PropTypes.func,
-    movingEvent: PropTypes.func,
-    conflictOccurred: PropTypes.func,
-    subtitleGetter: PropTypes.func,
-    eventItemClick: PropTypes.func,
-    viewEventClick: PropTypes.func,
-    viewEventText: PropTypes.string,
-    viewEvent2Click: PropTypes.func,
-    viewEvent2Text: PropTypes.string,
-    newEvent: PropTypes.func,
-    eventItemTemplateResolver: PropTypes.func,
-    eventItemPopoverTemplateResolver: PropTypes.func,
-    onSelectionChange: PropTypes.func,
-    isRowSelected: PropTypes.bool,
-    selectionPreview: PropTypes.shape({
-      isSelecting: PropTypes.bool,
-      left: PropTypes.number,
-      width: PropTypes.number
-    })
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelecting: false,
-      left: 0,
-      width: 0,
-      // Add vertical selection tracking
-      originalStartRowIndex: -1,
-      startRowIndex: -1,
-      endRowIndex: -1,
-      // where the dragged item would land (set from the drop target's hover)
-      dropPreview: null
-    };
-    this.supportTouch = false; // 'ontouchstart' in window;
-  }
-  componentDidMount() {
-    const {
-      schedulerData
-    } = this.props;
-    const {
-      config
-    } = schedulerData;
-    this.supportTouch = 'ontouchstart' in window;
-    if (config.creatable === true) {
-      this.supportTouchHelper();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    const prevCreatable = prevProps.schedulerData?.config?.creatable;
-    const currentCreatable = this.props.schedulerData?.config?.creatable;
-    if (prevCreatable !== currentCreatable) {
-      this.supportTouchHelper('remove');
-      if (currentCreatable) {
-        this.supportTouchHelper();
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.cleanupDragInteraction();
-    this.supportTouchHelper('remove');
-    this.emitSelectionChange(false, [], {
-      left: 0,
-      width: 0
-    });
-  }
-  setDropPreview = dropPreview => {
-    if (!Number.isFinite(dropPreview.left) || !Number.isFinite(dropPreview.width)) return;
-    const current = this.state.dropPreview;
-    if (current?.left === dropPreview.left && current?.width === dropPreview.width) return;
-    this.setState({
-      dropPreview
-    });
-  };
-  cleanupDragInteraction = () => {
-    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;
-  };
-  supportTouchHelper = (evType = 'add') => {
-    const ev = evType === 'add' ? this.eventContainer.addEventListener : this.eventContainer.removeEventListener;
-    if (this.supportTouch) {
-      // ev('touchstart', this.initDrag, false);
-    } else {
-      ev('mousedown', this.initDrag, false);
-    }
-  };
-  initDrag = ev => {
-    const {
-      isSelecting
-    } = this.state;
-    if (isSelecting) return;
-    if ((ev.srcElement || ev.target) !== this.eventContainer) return;
-    ev.stopPropagation();
-    const {
-      resourceEvents
-    } = this.props;
-    if (resourceEvents.groupOnly) return;
-    const [clientX, toReturn] = this.dragHelper(ev, 'init');
-    if (toReturn) {
-      return;
-    }
-    const {
-      schedulerData
-    } = this.props;
-    const cellWidth = schedulerData.getContentCellWidth();
-    const pos = getPos(this.eventContainer);
-    const startX = clientX - pos.x;
-    const leftIndex = Math.floor(startX / cellWidth);
-    const left = leftIndex * cellWidth;
-    const rightIndex = Math.ceil(startX / cellWidth);
-    const width = (rightIndex - leftIndex) * cellWidth;
-
-    // Get the row index of this resource
-    const startRowIndex = this.getResourceRowIndex(resourceEvents.slotId);
-    this.setState({
-      startX,
-      left,
-      leftIndex,
-      width,
-      rightIndex,
-      isSelecting: true,
-      originalStartRowIndex: startRowIndex,
-      startRowIndex,
-      endRowIndex: startRowIndex // Initially same as start
-    });
-    this.emitSelectionChange(true, this.getSelectedResourceIds(startRowIndex, startRowIndex), {
-      left,
-      width
-    });
-    if (this.supportTouch) {
-      document.documentElement.addEventListener('touchmove', this.doDrag, false);
-      document.documentElement.addEventListener('touchend', this.stopDrag, false);
-      document.documentElement.addEventListener('touchcancel', this.cancelDrag, false);
-    } else {
-      document.documentElement.addEventListener('mousemove', this.doDrag, false);
-      document.documentElement.addEventListener('mouseup', this.stopDrag, false);
-    }
-    document.onselectstart = () => false;
-    document.ondragstart = () => false;
-  };
-  doDrag = ev => {
-    ev.stopPropagation();
-    const [clientX, toReturn] = this.dragHelper(ev, 'do');
-    if (toReturn) {
-      return;
-    }
-    const {
-      startX,
-      originalStartRowIndex
-    } = this.state;
-    const {
-      schedulerData
-    } = this.props;
-    const {
-      headers
-    } = schedulerData;
-    const cellWidth = schedulerData.getContentCellWidth();
-    const pos = getPos(this.eventContainer);
-    const currentX = clientX - pos.x;
-    let leftIndex = Math.floor(Math.min(startX, currentX) / cellWidth);
-    leftIndex = leftIndex < 0 ? 0 : leftIndex;
-    const left = leftIndex * cellWidth;
-    let rightIndex = Math.ceil(Math.max(startX, currentX) / cellWidth);
-    rightIndex = rightIndex > headers.length ? headers.length : rightIndex;
-    const width = (rightIndex - leftIndex) * cellWidth;
-
-    // Calculate current row based on per-row heights (not a uniform row height assumption).
-    let clientY = ev.clientY;
-    if (this.supportTouch && ev.changedTouches && ev.changedTouches.length > 0) {
-      clientY = ev.changedTouches[0].clientY;
-    }
-    const currentY = clientY - pos.y;
-    const displayRenderData = this.getDisplayRenderData();
-    if (displayRenderData.length === 0) {
-      this.setState({
-        leftIndex,
-        left,
-        rightIndex,
-        width,
-        isSelecting: true,
-        startRowIndex: -1,
-        endRowIndex: -1
-      });
-      this.emitSelectionChange(true, [], {
-        left,
-        width
-      });
-      return;
+    eventContainer = null;
+    supportTouch;
+    constructor(props) {
+        super(props);
+        this.state = {
+            isSelecting: false,
+            left: 0,
+            width: 0,
+            // Add vertical selection tracking
+            originalStartRowIndex: -1,
+            startRowIndex: -1,
+            endRowIndex: -1,
+            // where the dragged item would land (set from the drop target's hover)
+            dropPreview: null,
+        };
+        this.supportTouch = false; // 'ontouchstart' in window;
     }
-    const rowHeights = displayRenderData.map(row => row?.rowHeight || DEFAULT_ROW_HEIGHT);
-    const startRowTop = rowHeights.slice(0, Math.max(0, originalStartRowIndex)).reduce((sum, h) => sum + h, 0);
-    const absoluteY = startRowTop + currentY;
-    let cumulativeHeight = 0;
-    let currentRowIndex = rowHeights.length - 1;
-    for (let i = 0; i < rowHeights.length; i += 1) {
-      cumulativeHeight += rowHeights[i];
-      if (absoluteY < cumulativeHeight) {
-        currentRowIndex = i;
-        break;
-      }
+    componentDidMount() {
+        const { schedulerData } = this.props;
+        const { config } = schedulerData;
+        this.supportTouch = 'ontouchstart' in window;
+        if (config.creatable === true) {
+            this.supportTouchHelper();
+        }
     }
-    if (absoluteY < 0) {
-      currentRowIndex = 0;
+    componentDidUpdate(prevProps) {
+        const prevCreatable = prevProps.schedulerData?.config?.creatable;
+        const currentCreatable = this.props.schedulerData?.config?.creatable;
+        if (prevCreatable !== currentCreatable) {
+            this.supportTouchHelper('remove');
+            if (currentCreatable) {
+                this.supportTouchHelper();
+            }
+        }
     }
-    const minRowIndex = Math.min(originalStartRowIndex, currentRowIndex);
-    const maxRowIndex = Math.max(originalStartRowIndex, currentRowIndex);
-
-    // Clamp to valid row indices
-    const clampedMinRow = Math.max(0, minRowIndex);
-    const clampedMaxRow = Math.min(displayRenderData.length - 1, maxRowIndex);
-    this.setState({
-      leftIndex,
-      left,
-      rightIndex,
-      width,
-      isSelecting: true,
-      startRowIndex: clampedMinRow,
-      endRowIndex: clampedMaxRow
-    });
-    this.emitSelectionChange(true, this.getSelectedResourceIds(clampedMinRow, clampedMaxRow), {
-      left,
-      width
-    });
-  };
-  dragHelper = (ev, dragType) => {
-    let clientX = 0;
-    if (this.supportTouch) {
-      if (ev.changedTouches.length === 0) return [clientX, true];
-      const touch = ev.changedTouches[0];
-      clientX = touch.pageX;
-    } else if (dragType === 'init') {
-      if (ev.buttons !== undefined && ev.buttons !== 1) return [clientX, true];
-      clientX = ev.clientX;
-    } else {
-      clientX = ev.clientX;
+    componentWillUnmount() {
+        this.cleanupDragInteraction();
+        this.supportTouchHelper('remove');
+        this.emitSelectionChange(false, [], { left: 0, width: 0 });
     }
-    return [clientX, false];
-  };
-  stopDrag = ev => {
-    if (ev?.stopPropagation) ev.stopPropagation();
-    const {
-      schedulerData,
-      newEvent,
-      resourceEvents
-    } = this.props;
-    const {
-      headers,
-      events,
-      config,
-      cellUnit,
-      localeDayjs
-    } = schedulerData;
-    const {
-      leftIndex,
-      rightIndex
-    } = this.state;
-    this.cleanupDragInteraction();
-    const resetSelection = () => {
-      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
-      });
+    setDropPreview = (dropPreview) => {
+        if (!Number.isFinite(dropPreview.left) || !Number.isFinite(dropPreview.width))
+            return;
+        const current = this.state.dropPreview;
+        if (current?.left === dropPreview.left && current?.width === dropPreview.width)
+            return;
+        this.setState({ dropPreview });
     };
-    if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
-      resetSelection();
-      return;
-    }
-
-    // a cell width of 0 (container not measured yet) makes the drag indexes NaN or Infinity
-    const toIndex = (value, fallback) => Number.isFinite(value) ? value : fallback;
-    const maxLeftIndex = headers.length - 1;
-    const safeLeftIndex = Math.max(0, Math.min(toIndex(leftIndex, 0), maxLeftIndex));
-    const maxRightIndex = Math.min(headers.length, resourceEvents.headerItems.length);
-    let safeRightIndex = Math.max(1, toIndex(rightIndex, 1), safeLeftIndex + 1);
-    safeRightIndex = Math.min(safeRightIndex, maxRightIndex);
-
-    // headers and headerItems can be out of step while the view rebuilds; drop the selection instead of throwing
-    if (!headers[safeLeftIndex] || !resourceEvents.headerItems[safeRightIndex - 1]) {
-      resetSelection();
-      return;
-    }
-    const isVertical = schedulerData.isVerticalResourceView();
-    // vertical view: rows are time slots and columns are resources, so the roles swap
-    const selectedRowIds = this.getSelectedResourceIds();
-    let startTime, endTime;
-    if (isVertical) {
-      startTime = selectedRowIds[0] ?? resourceEvents.slotId;
-      const lastRowId = selectedRowIds[selectedRowIds.length - 1] ?? startTime;
-      endTime = localeDayjs(new Date(lastRowId)).add(config.minuteStep, 'minutes').format(DATETIME_FORMAT);
-    } else {
-      startTime = headers[safeLeftIndex].time;
-      endTime = resourceEvents.headerItems[safeRightIndex - 1].end;
-      if (cellUnit !== CellUnit.Hour) {
-        endTime = localeDayjs(new Date(resourceEvents.headerItems[safeRightIndex - 1].start)).hour(23).minute(59).second(59).format(DATETIME_FORMAT);
-      }
-    }
-
-    // Get selected resource IDs
-    const selectedResourceIds = isVertical ? headers.slice(safeLeftIndex, safeRightIndex).map(header => header.id) : selectedRowIds;
-    const slotId = selectedResourceIds.length > 0 ? selectedResourceIds[0] : resourceEvents.slotId;
-    const slotName = selectedResourceIds.length > 0 ? schedulerData.getResourceById(slotId)?.name || slotId : resourceEvents.slotName;
-    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
-    });
-    let hasConflict = false;
-    if (config.checkConflict) {
-      const start = localeDayjs(new Date(startTime));
-      const end = localeDayjs(endTime);
-      events.forEach(e => {
-        const eventResourceIds = e.resourceIds || [e.resourceId];
-        const hasOverlap = selectedResourceIds.some(selectedId => eventResourceIds.includes(selectedId));
-        if (hasOverlap) {
-          const eStart = localeDayjs(e.start);
-          const eEnd = localeDayjs(e.end);
-          if (start >= eStart && start < eEnd || end > eStart && end <= eEnd || eStart >= start && eStart < end || eEnd > start && eEnd <= end) hasConflict = true;
+    cleanupDragInteraction = () => {
+        document.documentElement.removeEventListener('touchmove', asListener(this.doDrag), false);
+        document.documentElement.removeEventListener('touchend', asListener(this.stopDrag), false);
+        document.documentElement.removeEventListener('touchcancel', asListener(this.cancelDrag), false);
+        document.documentElement.removeEventListener('mousemove', asListener(this.doDrag), false);
+        document.documentElement.removeEventListener('mouseup', asListener(this.stopDrag), false);
+        document.onselectstart = null;
+        document.ondragstart = null;
+    };
+    supportTouchHelper = (evType = 'add') => {
+        const container = this.eventContainer;
+        if (!container)
+            return;
+        const ev = evType === 'add' ? container.addEventListener : container.removeEventListener;
+        if (this.supportTouch) {
+            // ev('touchstart', this.initDrag, false);
         }
-      });
-    }
-    if (hasConflict) {
-      const {
-        conflictOccurred
-      } = this.props;
-      if (conflictOccurred !== undefined) {
-        conflictOccurred(schedulerData, 'New', {
-          id: undefined,
-          start: startTime,
-          end: endTime,
-          resourceId: slotId,
-          // Keep for backward compatibility
-          resourceIds: selectedResourceIds,
-          // Add multi-resource support
-          slotId,
-          slotName,
-          title: undefined
-        }, DnDTypes.EVENT, slotId, slotName, startTime, endTime);
-      } else {
-        console.log('Conflict occurred, set conflictOccurred func in Scheduler to handle it');
-      }
-    } else if (newEvent !== undefined) {
-      // Pass resourceIds for multi-resource events
-      newEvent(schedulerData, slotId, slotName, startTime, endTime, undefined, {
-        resourceIds: selectedResourceIds.length > 1 ? selectedResourceIds : undefined
-      });
-    }
-  };
-  cancelDrag = ev => {
-    if (ev?.stopPropagation) ev.stopPropagation();
-    const {
-      isSelecting
-    } = this.state;
-    if (isSelecting) {
-      this.cleanupDragInteraction();
-      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
-      });
-    }
-  };
-  emitSelectionChange = (isSelecting, selectedResourceIds, preview = {}) => {
-    const {
-      onSelectionChange
-    } = this.props;
-    if (onSelectionChange) {
-      onSelectionChange(isSelecting, selectedResourceIds, preview);
-    }
-  };
-  onAddMoreClick = headerItem => {
-    const {
-      onSetAddMoreState,
-      resourceEvents,
-      schedulerData
-    } = this.props;
-    if (onSetAddMoreState) {
-      const {
-        config
-      } = schedulerData;
-      const cellWidth = schedulerData.getContentCellWidth();
-      const index = resourceEvents.headerItems.indexOf(headerItem);
-      if (index !== -1) {
-        let left = index * (cellWidth - 1);
+        else {
+            // keeps the original unbound call, as ev is not invoked on the container
+            ev.call(container, 'mousedown', asListener(this.initDrag), false);
+        }
+    };
+    initDrag = (ev) => {
+        const { isSelecting } = this.state;
+        if (isSelecting)
+            return;
+        if (ev.target !== this.eventContainer)
+            return;
+        ev.stopPropagation();
+        const { resourceEvents } = this.props;
+        if (resourceEvents.groupOnly)
+            return;
+        const [clientX, toReturn] = this.dragHelper(ev, 'init');
+        if (toReturn) {
+            return;
+        }
+        const { schedulerData } = this.props;
+        const cellWidth = schedulerData.getContentCellWidth();
         const pos = getPos(this.eventContainer);
-        left += pos.x;
-        const top = pos.y;
-        const height = (headerItem.count + 1) * config.eventItemLineHeight + 20;
-        onSetAddMoreState({
-          headerItem,
-          left,
-          top,
-          height
+        const startX = clientX - pos.x;
+        const leftIndex = Math.floor(startX / cellWidth);
+        const left = leftIndex * cellWidth;
+        const rightIndex = Math.ceil(startX / cellWidth);
+        const width = (rightIndex - leftIndex) * cellWidth;
+        // Get the row index of this resource
+        const startRowIndex = this.getResourceRowIndex(resourceEvents.slotId);
+        this.setState({
+            startX,
+            left,
+            leftIndex,
+            width,
+            rightIndex,
+            isSelecting: true,
+            originalStartRowIndex: startRowIndex,
+            startRowIndex,
+            endRowIndex: startRowIndex, // Initially same as start
         });
-      }
-    }
-  };
-  eventContainerRef = element => {
-    this.eventContainer = element;
-    // Also set the drop ref if it exists
-    const {
-      dropRef
-    } = this.props;
-    if (dropRef) {
-      dropRef(element);
-    }
-  };
-  getResourceRowIndex = slotId => {
-    return this.getDisplayRenderData().findIndex(row => row.slotId === slotId);
-  };
-  getDisplayRenderData = () => {
-    const {
-      schedulerData
-    } = this.props;
-    return schedulerData.renderData.filter(row => row.render);
-  };
-  getSelectedResourceIds = (startOverride, endOverride) => {
-    const {
-      startRowIndex,
-      endRowIndex
-    } = this.state;
-    const displayRenderData = this.getDisplayRenderData();
-    const from = startOverride !== undefined ? startOverride : startRowIndex;
-    const to = endOverride !== undefined ? endOverride : endRowIndex;
-    if (from === -1 || to === -1) {
-      return [];
-    }
-    const selectedResourceIds = [];
-    for (let i = from; i <= to; i++) {
-      const row = displayRenderData[i];
-      if (row && !row.groupOnly) {
-        selectedResourceIds.push(row.slotId);
-      }
-    }
-    return selectedResourceIds;
-  };
-  render() {
-    const {
-      resourceEvents,
-      schedulerData,
-      dndSource
-    } = this.props;
-    const {
-      cellUnit,
-      startDate,
-      endDate,
-      config,
-      localeDayjs
-    } = schedulerData;
-    const {
-      isSelecting,
-      left,
-      width,
-      startRowIndex,
-      endRowIndex
-    } = this.state;
-    const cellWidth = schedulerData.getContentCellWidth();
-    const cellMaxEvents = schedulerData.getCellMaxEvents();
-    const rowWidth = schedulerData.getContentTableWidth();
-    const selectedArea = isSelecting ? /*#__PURE__*/_jsx(SelectedArea, {
-      schedulerData: schedulerData,
-      left: left,
-      width: width
-    }) : /*#__PURE__*/_jsx("div", {});
-    const sharedSelecting = this.props.selectionPreview?.isSelecting;
-    const isSharedSelectedRow = sharedSelecting && this.props.isRowSelected;
-    const sharedLeft = this.props.selectionPreview?.left || 0;
-    const sharedWidth = this.props.selectionPreview?.width || 0;
-    const sharedSelectedArea = !isSelecting && isSharedSelectedRow ? /*#__PURE__*/_jsx(SelectedArea, {
-      schedulerData: schedulerData,
-      left: sharedLeft,
-      width: sharedWidth
-    }) : null;
-
-    // Add vertical selection overlay
-    const verticalSelectionOverlay = isSelecting && startRowIndex !== endRowIndex ? /*#__PURE__*/_jsx("div", {
-      className: "vertical-selection-overlay"
-    }) : null;
-    const eventList = [];
-    resourceEvents.headerItems.forEach((headerItem, index) => {
-      if (headerItem.count > 0 || headerItem.summary !== undefined) {
-        const isTop = config.summaryPos === SummaryPos.TopRight || config.summaryPos === SummaryPos.Top || config.summaryPos === SummaryPos.TopLeft;
-        const marginTop = resourceEvents.hasSummary && isTop ? 1 + config.eventItemLineHeight : 1;
-        const renderEventsMaxIndex = headerItem.addMore === 0 ? cellMaxEvents : headerItem.addMoreIndex;
-        headerItem.events.forEach((evt, idx) => {
-          if (idx < renderEventsMaxIndex && evt !== undefined && evt.render) {
-            let durationStart = localeDayjs(new Date(startDate));
-            let durationEnd = localeDayjs(endDate);
-            if (cellUnit === CellUnit.Hour) {
-              durationStart = localeDayjs(new Date(startDate)).add(config.dayStartFrom, 'hours');
-              durationEnd = localeDayjs(endDate).add(config.dayStopTo + 1, 'hours');
-            }
-            const eventStart = normalizeEventStart(evt.eventItem.start);
-            const eventEnd = normalizeEventEnd(evt.eventItem.end);
-            const isStart = eventStart >= durationStart;
-            const isEnd = eventEnd <= durationEnd;
-            let left = index * cellWidth + (index > 0 ? 2 : 3);
-            let width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
-            if (cellUnit === CellUnit.Day || cellUnit === CellUnit.Hour) {
-              // Clamp the event to the cells it covers, then position it proportionally inside the
-              // first and last cell (each cell's own duration, so DST days and sub-slot times are handled).
-              const lastHeaderItem = resourceEvents.headerItems[index + evt.span - 1] ?? headerItem;
-              const firstCellStart = localeDayjs(new Date(headerItem.start));
-              const firstCellEnd = localeDayjs(new Date(headerItem.end));
-              const lastCellStart = localeDayjs(new Date(lastHeaderItem.start));
-              const lastCellEnd = localeDayjs(new Date(lastHeaderItem.end));
-              const clampedStart = eventStart.isAfter(firstCellStart) ? eventStart : firstCellStart;
-              const clampedEnd = eventEnd.isBefore(lastCellEnd) ? eventEnd : lastCellEnd;
-              const startFraction = clampedStart.diff(firstCellStart) / firstCellEnd.diff(firstCellStart);
-              const endFraction = clampedEnd.diff(lastCellStart) / lastCellEnd.diff(lastCellStart);
-              const usableWidth = evt.span * cellWidth - (index > 0 ? 5 : 6);
-              left = index * cellWidth + (index > 0 ? 2 : 3) + usableWidth * startFraction / evt.span;
-              width = Math.max(1, usableWidth * (evt.span - 1 + endFraction - startFraction) / evt.span);
-            } else {
-              width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
+        this.emitSelectionChange(true, this.getSelectedResourceIds(startRowIndex, startRowIndex), { left, width });
+        if (this.supportTouch) {
+            document.documentElement.addEventListener('touchmove', asListener(this.doDrag), false);
+            document.documentElement.addEventListener('touchend', asListener(this.stopDrag), false);
+            document.documentElement.addEventListener('touchcancel', asListener(this.cancelDrag), false);
+        }
+        else {
+            document.documentElement.addEventListener('mousemove', asListener(this.doDrag), false);
+            document.documentElement.addEventListener('mouseup', asListener(this.stopDrag), false);
+        }
+        document.onselectstart = () => false;
+        document.ondragstart = () => false;
+    };
+    doDrag = (ev) => {
+        ev.stopPropagation();
+        const [clientX, toReturn] = this.dragHelper(ev, 'do');
+        if (toReturn) {
+            return;
+        }
+        const { originalStartRowIndex } = this.state;
+        const startX = this.state.startX ?? 0;
+        const { schedulerData } = this.props;
+        const { headers } = schedulerData;
+        const cellWidth = schedulerData.getContentCellWidth();
+        const pos = getPos(this.eventContainer);
+        const currentX = clientX - pos.x;
+        let leftIndex = Math.floor(Math.min(startX, currentX) / cellWidth);
+        leftIndex = leftIndex < 0 ? 0 : leftIndex;
+        const left = leftIndex * cellWidth;
+        let rightIndex = Math.ceil(Math.max(startX, currentX) / cellWidth);
+        rightIndex = rightIndex > headers.length ? headers.length : rightIndex;
+        const width = (rightIndex - leftIndex) * cellWidth;
+        // Calculate current row based on per-row heights (not a uniform row height assumption).
+        let clientY = ev.clientY;
+        const { changedTouches } = ev;
+        if (this.supportTouch && changedTouches && changedTouches.length > 0) {
+            clientY = changedTouches[0].clientY;
+        }
+        const currentY = clientY - pos.y;
+        const displayRenderData = this.getDisplayRenderData();
+        if (displayRenderData.length === 0) {
+            this.setState({
+                leftIndex,
+                left,
+                rightIndex,
+                width,
+                isSelecting: true,
+                startRowIndex: -1,
+                endRowIndex: -1,
+            });
+            this.emitSelectionChange(true, [], { left, width });
+            return;
+        }
+        const rowHeights = displayRenderData.map(row => row?.rowHeight || DEFAULT_ROW_HEIGHT);
+        const startRowTop = rowHeights.slice(0, Math.max(0, originalStartRowIndex)).reduce((sum, h) => sum + h, 0);
+        const absoluteY = startRowTop + currentY;
+        let cumulativeHeight = 0;
+        let currentRowIndex = rowHeights.length - 1;
+        for (let i = 0; i < rowHeights.length; i += 1) {
+            cumulativeHeight += rowHeights[i];
+            if (absoluteY < cumulativeHeight) {
+                currentRowIndex = i;
+                break;
             }
-            const top = schedulerData.isVerticalResourceView() ? 0 : marginTop + idx * config.eventItemLineHeight;
-            const height = schedulerData.isVerticalResourceView() ? resourceEvents.rowHeight : undefined;
-            if (schedulerData.isVerticalResourceView()) {
-              const eventCount = headerItem.count;
-              const itemWidth = (cellWidth - (index > 0 ? 5 : 6)) / eventCount;
-              left = index * cellWidth + (index > 0 ? 2 : 3) + idx * itemWidth;
-              width = itemWidth;
+        }
+        if (absoluteY < 0) {
+            currentRowIndex = 0;
+        }
+        const minRowIndex = Math.min(originalStartRowIndex, currentRowIndex);
+        const maxRowIndex = Math.max(originalStartRowIndex, currentRowIndex);
+        // Clamp to valid row indices
+        const clampedMinRow = Math.max(0, minRowIndex);
+        const clampedMaxRow = Math.min(displayRenderData.length - 1, maxRowIndex);
+        this.setState({
+            leftIndex,
+            left,
+            rightIndex,
+            width,
+            isSelecting: true,
+            startRowIndex: clampedMinRow,
+            endRowIndex: clampedMaxRow,
+        });
+        this.emitSelectionChange(true, this.getSelectedResourceIds(clampedMinRow, clampedMaxRow), { left, width });
+    };
+    dragHelper = (ev, dragType) => {
+        let clientX = 0;
+        if (this.supportTouch) {
+            const { changedTouches } = ev;
+            if (changedTouches.length === 0)
+                return [clientX, true];
+            const touch = changedTouches[0];
+            clientX = touch.pageX;
+        }
+        else if (dragType === 'init') {
+            const { buttons } = ev;
+            if (buttons !== undefined && buttons !== 1)
+                return [clientX, true];
+            clientX = ev.clientX;
+        }
+        else {
+            clientX = ev.clientX;
+        }
+        return [clientX, false];
+    };
+    stopDrag = (ev) => {
+        if (ev?.stopPropagation)
+            ev.stopPropagation();
+        const { schedulerData, newEvent, resourceEvents } = this.props;
+        const { headers, events, config, cellUnit, localeDayjs } = schedulerData;
+        const { leftIndex, rightIndex } = this.state;
+        this.cleanupDragInteraction();
+        const resetSelection = () => {
+            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 });
+        };
+        if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
+            resetSelection();
+            return;
+        }
+        // a cell width of 0 (container not measured yet) makes the drag indexes NaN or Infinity
+        const toIndex = (value, fallback) => value !== undefined && Number.isFinite(value) ? value : fallback;
+        const maxLeftIndex = headers.length - 1;
+        const safeLeftIndex = Math.max(0, Math.min(toIndex(leftIndex, 0), maxLeftIndex));
+        const maxRightIndex = Math.min(headers.length, resourceEvents.headerItems.length);
+        let safeRightIndex = Math.max(1, toIndex(rightIndex, 1), safeLeftIndex + 1);
+        safeRightIndex = Math.min(safeRightIndex, maxRightIndex);
+        // headers and headerItems can be out of step while the view rebuilds; drop the selection instead of throwing
+        if (!headers[safeLeftIndex] || !resourceEvents.headerItems[safeRightIndex - 1]) {
+            resetSelection();
+            return;
+        }
+        const isVertical = schedulerData.isVerticalResourceView();
+        // vertical view: rows are time slots and columns are resources, so the roles swap
+        const selectedRowIds = this.getSelectedResourceIds();
+        let startTime;
+        let endTime;
+        if (isVertical) {
+            // in the vertical view slot ids are the row's time string
+            startTime = (selectedRowIds[0] ?? resourceEvents.slotId);
+            const lastRowId = selectedRowIds[selectedRowIds.length - 1] ?? startTime;
+            endTime = localeDayjs(new Date(lastRowId)).add(config.minuteStep, 'minutes').format(DATETIME_FORMAT);
+        }
+        else {
+            startTime = headers[safeLeftIndex].time;
+            endTime = resourceEvents.headerItems[safeRightIndex - 1].end;
+            if (cellUnit !== CellUnit.Hour) {
+                endTime = localeDayjs(new Date(resourceEvents.headerItems[safeRightIndex - 1].start))
+                    .hour(23)
+                    .minute(59)
+                    .second(59)
+                    .format(DATETIME_FORMAT);
             }
-            const eventKey = `${evt.eventItem.id}_${resourceEvents.slotId}_${index}`;
-            const eventItem = /*#__PURE__*/_jsx(EventItem, {
-              schedulerData: schedulerData,
-              eventItem: evt.eventItem,
-              dndSource: dndSource,
-              isStart: isStart,
-              isEnd: isEnd,
-              isInPopover: false,
-              slotId: resourceEvents.slotId,
-              left: left,
-              width: width,
-              top: top,
-              height: height,
-              leftIndex: index,
-              rightIndex: index + evt.span
-              // Passing through functional props
-              ,
-              eventItemClick: this.props.eventItemClick,
-              viewEventClick: this.props.viewEventClick,
-              viewEventText: this.props.viewEventText,
-              viewEvent2Click: this.props.viewEvent2Click,
-              viewEvent2Text: this.props.viewEvent2Text,
-              eventItemTemplateResolver: this.props.eventItemTemplateResolver,
-              eventItemPopoverTemplateResolver: this.props.eventItemPopoverTemplateResolver,
-              subtitleGetter: this.props.subtitleGetter,
-              updateEventStart: this.props.updateEventStart,
-              updateEventEnd: this.props.updateEventEnd,
-              moveEvent: this.props.moveEvent,
-              conflictOccurred: this.props.conflictOccurred
-            }, eventKey);
-            eventList.push(eventItem);
-          }
+        }
+        // Get selected resource IDs
+        const selectedResourceIds = isVertical
+            ? headers
+                .slice(safeLeftIndex, safeRightIndex)
+                .map(header => header.id)
+                .filter((id) => id !== undefined)
+            : selectedRowIds;
+        const slotId = selectedResourceIds.length > 0 ? selectedResourceIds[0] : resourceEvents.slotId;
+        const slotName = selectedResourceIds.length > 0
+            ? String(schedulerData.getResourceById(slotId)?.name || slotId)
+            : resourceEvents.slotName;
+        this.setState({
+            startX: 0,
+            leftIndex: 0,
+            left: 0,
+            rightIndex: 0,
+            width: 0,
+            isSelecting: false,
+            originalStartRowIndex: -1,
+            startRowIndex: -1,
+            endRowIndex: -1,
         });
-        if (headerItem.addMore > 0) {
-          const left = index * cellWidth + (index > 0 ? 2 : 3);
-          const width = cellWidth - (index > 0 ? 5 : 6);
-          const top = marginTop + headerItem.addMoreIndex * config.eventItemLineHeight;
-          const addMoreItem = /*#__PURE__*/_jsx(AddMore, {
-            schedulerData: schedulerData,
-            headerItem: headerItem,
-            number: headerItem.addMore,
-            left: left,
-            width: width,
-            top: top,
-            clickAction: this.onAddMoreClick
-          }, `add-more-${headerItem.time}`);
-          eventList.push(addMoreItem);
+        this.emitSelectionChange(false, [], { left: 0, width: 0 });
+        let hasConflict = false;
+        if (config.checkConflict) {
+            const start = localeDayjs(new Date(startTime));
+            const end = localeDayjs(endTime);
+            events.forEach(e => {
+                const eventResourceIds = e.resourceIds || [e.resourceId];
+                const hasOverlap = selectedResourceIds.some(selectedId => eventResourceIds.includes(selectedId));
+                if (hasOverlap) {
+                    const eStart = localeDayjs(e.start);
+                    const eEnd = localeDayjs(e.end);
+                    if ((start >= eStart && start < eEnd) ||
+                        (end > eStart && end <= eEnd) ||
+                        (eStart >= start && eStart < end) ||
+                        (eEnd > start && eEnd <= end))
+                        hasConflict = true;
+                }
+            });
+        }
+        if (hasConflict) {
+            const { conflictOccurred } = this.props;
+            if (conflictOccurred !== undefined) {
+                conflictOccurred(schedulerData, 'New', {
+                    id: undefined,
+                    start: startTime,
+                    end: endTime,
+                    resourceId: slotId, // Keep for backward compatibility
+                    resourceIds: selectedResourceIds, // Add multi-resource support
+                    slotId,
+                    slotName,
+                    title: undefined,
+                }, DnDTypes.EVENT, slotId, slotName, startTime, endTime);
+            }
+            else {
+                console.log('Conflict occurred, set conflictOccurred func in Scheduler to handle it');
+            }
+        }
+        else if (newEvent !== undefined) {
+            // Pass resourceIds for multi-resource events
+            newEvent(schedulerData, slotId, slotName, startTime, endTime, undefined, {
+                resourceIds: selectedResourceIds.length > 1 ? selectedResourceIds : undefined,
+            });
+        }
+    };
+    cancelDrag = (ev) => {
+        if (ev?.stopPropagation)
+            ev.stopPropagation();
+        const { isSelecting } = this.state;
+        if (isSelecting) {
+            this.cleanupDragInteraction();
+            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 });
+        }
+    };
+    emitSelectionChange = (isSelecting, selectedResourceIds, preview = {}) => {
+        const { onSelectionChange } = this.props;
+        if (onSelectionChange) {
+            onSelectionChange(isSelecting, selectedResourceIds, preview);
+        }
+    };
+    onAddMoreClick = (headerItem) => {
+        const { onSetAddMoreState, resourceEvents, schedulerData } = this.props;
+        if (onSetAddMoreState) {
+            const { config } = schedulerData;
+            const cellWidth = schedulerData.getContentCellWidth();
+            const index = resourceEvents.headerItems.indexOf(headerItem);
+            if (index !== -1) {
+                let left = index * (cellWidth - 1);
+                const pos = getPos(this.eventContainer);
+                left += pos.x;
+                const top = pos.y;
+                const height = ((headerItem.count ?? 0) + 1) * config.eventItemLineHeight + 20;
+                onSetAddMoreState({
+                    headerItem,
+                    left,
+                    top,
+                    height,
+                });
+            }
+        }
+    };
+    eventContainerRef = (element) => {
+        this.eventContainer = element;
+        // Also set the drop ref if it exists
+        const { dropRef } = this.props;
+        if (dropRef) {
+            dropRef(element);
+        }
+    };
+    getResourceRowIndex = (slotId) => {
+        return this.getDisplayRenderData().findIndex(row => row.slotId === slotId);
+    };
+    getDisplayRenderData = () => {
+        const { schedulerData } = this.props;
+        return schedulerData.renderData.filter(row => row.render);
+    };
+    getSelectedResourceIds = (startOverride, endOverride) => {
+        const { startRowIndex, endRowIndex } = this.state;
+        const displayRenderData = this.getDisplayRenderData();
+        const from = startOverride !== undefined ? startOverride : startRowIndex;
+        const to = endOverride !== undefined ? endOverride : endRowIndex;
+        if (from === -1 || to === -1) {
+            return [];
         }
-        if (headerItem.summary !== undefined) {
-          const top = isTop ? 1 : resourceEvents.rowHeight - config.eventItemLineHeight + 1;
-          const left = index * cellWidth + (index > 0 ? 2 : 3);
-          const width = cellWidth - (index > 0 ? 5 : 6);
-          const key = `${resourceEvents.slotId}_${headerItem.time}`;
-          const summary = /*#__PURE__*/_jsx(Summary, {
-            schedulerData: schedulerData,
-            summary: headerItem.summary,
-            left: left,
-            width: width,
-            top: top
-          }, key);
-          eventList.push(summary);
+        const selectedResourceIds = [];
+        for (let i = from; i <= to; i++) {
+            const row = displayRenderData[i];
+            if (row && !row.groupOnly) {
+                selectedResourceIds.push(row.slotId);
+            }
         }
-      }
-    });
-
-    // drop preview: styled box where the item being dragged over this row would be placed
-    const {
-      dropPreview
-    } = this.state;
-    const dropPreviewBox = this.props.isOver && this.props.canDrop && config.dropPreviewEnabled !== false && dropPreview ? /*#__PURE__*/_jsx("div", {
-      className: `drop-preview${config.dropPreviewClassName ? ` ${config.dropPreviewClassName}` : ''}`,
-      style: {
-        left: dropPreview.left,
-        width: dropPreview.width,
-        ...config.dropPreviewStyle
-      }
-    }) : null;
-    const eventContainer = /*#__PURE__*/_jsxs("div", {
-      ref: this.eventContainerRef,
-      className: "event-container",
-      "data-slot-id": resourceEvents.slotId,
-      style: {
-        height: resourceEvents.rowHeight
-      },
-      children: [selectedArea, sharedSelectedArea, verticalSelectionOverlay, dropPreviewBox, eventList]
-    });
-    return /*#__PURE__*/_jsx("tr", {
-      children: /*#__PURE__*/_jsx("td", {
-        style: {
-          width: rowWidth
-        },
-        children: eventContainer
-      })
-    });
-  }
+        return selectedResourceIds;
+    };
+    render() {
+        const { resourceEvents, schedulerData, dndSource } = this.props;
+        const { cellUnit, startDate, endDate, config, localeDayjs } = schedulerData;
+        const { isSelecting, left, width, startRowIndex, endRowIndex } = this.state;
+        const cellWidth = schedulerData.getContentCellWidth();
+        const cellMaxEvents = schedulerData.getCellMaxEvents();
+        const rowWidth = schedulerData.getContentTableWidth();
+        const selectedArea = isSelecting ? (_jsx(SelectedArea, { schedulerData: schedulerData, left: left, width: width })) : (_jsx("div", {}));
+        const sharedSelecting = this.props.selectionPreview?.isSelecting;
+        const isSharedSelectedRow = sharedSelecting && this.props.isRowSelected;
+        const sharedLeft = this.props.selectionPreview?.left || 0;
+        const sharedWidth = this.props.selectionPreview?.width || 0;
+        const sharedSelectedArea = !isSelecting && isSharedSelectedRow ? (_jsx(SelectedArea, { schedulerData: schedulerData, left: sharedLeft, width: sharedWidth })) : null;
+        // Add vertical selection overlay
+        const verticalSelectionOverlay = isSelecting && startRowIndex !== endRowIndex ? _jsx("div", { className: "vertical-selection-overlay" }) : null;
+        const eventList = [];
+        resourceEvents.headerItems.forEach((headerItem, index) => {
+            if ((headerItem.count ?? 0) > 0 || headerItem.summary !== undefined) {
+                const isTop = config.summaryPos === SummaryPos.TopRight ||
+                    config.summaryPos === SummaryPos.Top ||
+                    config.summaryPos === SummaryPos.TopLeft;
+                const marginTop = resourceEvents.hasSummary && isTop ? 1 + config.eventItemLineHeight : 1;
+                const renderEventsMaxIndex = headerItem.addMore === 0 ? cellMaxEvents : (headerItem.addMoreIndex ?? 0);
+                headerItem.events.forEach((evt, idx) => {
+                    if (idx < renderEventsMaxIndex && evt !== undefined && evt.render) {
+                        let durationStart = localeDayjs(toDate(startDate));
+                        let durationEnd = localeDayjs(endDate);
+                        if (cellUnit === CellUnit.Hour) {
+                            durationStart = localeDayjs(toDate(startDate)).add(config.dayStartFrom, 'hours');
+                            durationEnd = localeDayjs(endDate).add(config.dayStopTo + 1, 'hours');
+                        }
+                        const eventStart = normalizeEventStart(evt.eventItem.start);
+                        const eventEnd = normalizeEventEnd(evt.eventItem.end);
+                        const isStart = eventStart >= durationStart;
+                        const isEnd = eventEnd <= durationEnd;
+                        let left = index * cellWidth + (index > 0 ? 2 : 3);
+                        let width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
+                        if (cellUnit === CellUnit.Day || cellUnit === CellUnit.Hour) {
+                            // Clamp the event to the cells it covers, then position it proportionally inside the
+                            // first and last cell (each cell's own duration, so DST days and sub-slot times are handled).
+                            const lastHeaderItem = resourceEvents.headerItems[index + evt.span - 1] ?? headerItem;
+                            const firstCellStart = localeDayjs(new Date(headerItem.start));
+                            const firstCellEnd = localeDayjs(new Date(headerItem.end));
+                            const lastCellStart = localeDayjs(new Date(lastHeaderItem.start));
+                            const lastCellEnd = localeDayjs(new Date(lastHeaderItem.end));
+                            const clampedStart = eventStart.isAfter(firstCellStart) ? eventStart : firstCellStart;
+                            const clampedEnd = eventEnd.isBefore(lastCellEnd) ? eventEnd : lastCellEnd;
+                            const startFraction = clampedStart.diff(firstCellStart) / firstCellEnd.diff(firstCellStart);
+                            const endFraction = clampedEnd.diff(lastCellStart) / lastCellEnd.diff(lastCellStart);
+                            const usableWidth = evt.span * cellWidth - (index > 0 ? 5 : 6);
+                            left = index * cellWidth + (index > 0 ? 2 : 3) + (usableWidth * startFraction) / evt.span;
+                            width = Math.max(1, (usableWidth * (evt.span - 1 + endFraction - startFraction)) / evt.span);
+                        }
+                        else {
+                            width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
+                        }
+                        const top = schedulerData.isVerticalResourceView() ? 0 : marginTop + idx * config.eventItemLineHeight;
+                        const height = schedulerData.isVerticalResourceView() ? resourceEvents.rowHeight : undefined;
+                        if (schedulerData.isVerticalResourceView()) {
+                            const eventCount = headerItem.count ?? 0;
+                            const itemWidth = (cellWidth - (index > 0 ? 5 : 6)) / eventCount;
+                            left = index * cellWidth + (index > 0 ? 2 : 3) + idx * itemWidth;
+                            width = itemWidth;
+                        }
+                        const eventKey = `${evt.eventItem.id}_${resourceEvents.slotId}_${index}`;
+                        const eventItem = (_jsx(EventItem, { schedulerData: schedulerData, eventItem: evt.eventItem, dndSource: dndSource, isStart: isStart, isEnd: isEnd, isInPopover: false, slotId: resourceEvents.slotId, left: left, width: width, top: top, height: height, leftIndex: index, rightIndex: index + evt.span, 
+                            // Passing through functional props
+                            eventItemClick: this.props.eventItemClick, viewEventClick: this.props.viewEventClick, viewEventText: this.props.viewEventText, viewEvent2Click: this.props.viewEvent2Click, viewEvent2Text: this.props.viewEvent2Text, eventItemTemplateResolver: this.props.eventItemTemplateResolver, eventItemPopoverTemplateResolver: this.props.eventItemPopoverTemplateResolver, subtitleGetter: this.props.subtitleGetter, updateEventStart: this.props.updateEventStart, updateEventEnd: this.props.updateEventEnd, moveEvent: this.props.moveEvent, conflictOccurred: this.props.conflictOccurred }, eventKey));
+                        eventList.push(eventItem);
+                    }
+                });
+                if (headerItem.addMore !== undefined && headerItem.addMore > 0) {
+                    const left = index * cellWidth + (index > 0 ? 2 : 3);
+                    const width = cellWidth - (index > 0 ? 5 : 6);
+                    const top = marginTop + (headerItem.addMoreIndex ?? 0) * config.eventItemLineHeight;
+                    const addMoreItem = (_jsx(AddMore, { schedulerData: schedulerData, headerItem: headerItem, number: headerItem.addMore, left: left, width: width, top: top, clickAction: this.onAddMoreClick }, `add-more-${headerItem.time}`));
+                    eventList.push(addMoreItem);
+                }
+                if (headerItem.summary !== undefined) {
+                    const top = isTop ? 1 : resourceEvents.rowHeight - config.eventItemLineHeight + 1;
+                    const left = index * cellWidth + (index > 0 ? 2 : 3);
+                    const width = cellWidth - (index > 0 ? 5 : 6);
+                    const key = `${resourceEvents.slotId}_${headerItem.time}`;
+                    const summary = (_jsx(Summary, { schedulerData: schedulerData, summary: headerItem.summary, left: left, width: width, top: top }, key));
+                    eventList.push(summary);
+                }
+            }
+        });
+        // drop preview: styled box where the item being dragged over this row would be placed
+        const { dropPreview } = this.state;
+        const dropPreviewBox = this.props.isOver && this.props.canDrop && config.dropPreviewEnabled !== false && dropPreview ? (_jsx("div", { className: `drop-preview${config.dropPreviewClassName ? ` ${config.dropPreviewClassName}` : ''}`, style: { left: dropPreview.left, width: dropPreview.width, ...config.dropPreviewStyle } })) : null;
+        const eventContainer = (_jsxs("div", { ref: this.eventContainerRef, className: "event-container", "data-slot-id": resourceEvents.slotId, style: { height: resourceEvents.rowHeight }, children: [selectedArea, sharedSelectedArea, verticalSelectionOverlay, dropPreviewBox, eventList] }));
+        return (_jsx("tr", { children: _jsx("td", { style: { width: rowWidth }, children: eventContainer }) }));
+    }
 }
-
 // Wrapper component to use useDrop hook
-const ResourceEventsWithDnD = props => {
-  const {
-    schedulerData,
-    dndContext
-  } = props;
-  const {
-    config
-  } = schedulerData;
-  const componentRef = React.useRef(null);
-  const propsRef = React.useRef(props);
-
-  // Keep propsRef up to date
-  React.useEffect(() => {
-    propsRef.current = props;
-  }, [props]);
-
-  // Always call useDrop unconditionally (Rules of Hooks)
-  // Disable functionality when drag and drop is not enabled
-  const [{
-    isOver,
-    canDrop
-  }, dropRef] = useDrop(() => {
-    // If drag and drop is disabled, return a no-op spec
-    if (!config.dragAndDropEnabled || !dndContext) {
-      return {
-        accept: [],
-        collect: () => ({
-          isOver: false,
-          canDrop: false
-        })
-      };
-    }
-    const spec = dndContext.getDropSpec();
-    return {
-      accept: [...dndContext.sourceMap.keys()],
-      drop: (_item, monitor) => spec.drop(propsRef.current, monitor, componentRef.current),
-      hover: (_item, monitor) => spec.hover(propsRef.current, monitor, componentRef.current),
-      canDrop: (_item, monitor) => spec.canDrop(propsRef.current, monitor),
-      collect: monitor => ({
-        isOver: monitor.isOver(),
-        canDrop: monitor.canDrop()
-      })
-    };
-  }, [dndContext, config.dragAndDropEnabled]);
-  return /*#__PURE__*/_jsx(ResourceEvents, {
-    ref: componentRef,
-    ...props,
-    dropRef: dropRef,
-    isOver: isOver,
-    canDrop: canDrop
-  });
+const ResourceEventsWithDnD = (props) => {
+    const { schedulerData, dndContext } = props;
+    const { config } = schedulerData;
+    const componentRef = React.useRef(null);
+    const propsRef = React.useRef(props);
+    // Keep propsRef up to date
+    React.useEffect(() => {
+        propsRef.current = props;
+    }, [props]);
+    // Always call useDrop unconditionally (Rules of Hooks)
+    // Disable functionality when drag and drop is not enabled
+    const [{ isOver, canDrop }, dropRef] = useDrop(() => {
+        // If drag and drop is disabled, return a no-op spec
+        if (!config.dragAndDropEnabled || !dndContext) {
+            return {
+                accept: [],
+                collect: () => ({ isOver: false, canDrop: false }),
+            };
+        }
+        const spec = dndContext.getDropSpec();
+        return {
+            accept: [...dndContext.sourceMap.keys()],
+            drop: (_item, monitor) => componentRef.current ? spec.drop(propsRef.current, monitor, componentRef.current) : undefined,
+            hover: (_item, monitor) => {
+                if (componentRef.current)
+                    spec.hover(propsRef.current, monitor, componentRef.current);
+            },
+            canDrop: (_item, monitor) => spec.canDrop(propsRef.current, monitor),
+            collect: monitor => ({
+                isOver: monitor.isOver(),
+                canDrop: monitor.canDrop(),
+            }),
+        };
+    }, [dndContext, config.dragAndDropEnabled]);
+    return _jsx(ResourceEvents, { ref: componentRef, ...props, dropRef: dropRef, isOver: isOver, canDrop: canDrop });
 };
 ResourceEventsWithDnD.displayName = 'ResourceEventsWithDnD';
-export default /*#__PURE__*/React.memo(ResourceEventsWithDnD);
+export default React.memo(ResourceEventsWithDnD);