feat: implement VerticalResource view with layout and styling updates

src/components/BodyView.jsx

@@ -7,13 +7,21 @@ function BodyView({ schedulerData }) {
 
   const tableRows = renderData
     .filter(o => o.render)
-    .map(({ slotId, groupOnly, rowHeight }) => {
-      const rowCells = headers.map((header, index) => {
+    .map(row => {
+      const { slotId, groupOnly, rowHeight } = row;
+      const rowCells = headers.map(header => {
         const key = `${slotId}_${header.time}`;
-        const style = index === headers.length - 1 ? {} : { width };
-        if (header.nonWorkingTime) {
+        const style = { width, minWidth: width };
+        const isVertical = schedulerData.isVerticalResourceView();
+
+        if (isVertical) {
+          if (row.nonWorkingTime) {
+            style.backgroundColor = config.nonWorkingTimeBodyBgColor;
+          }
+        } else if (header.nonWorkingTime) {
           style.backgroundColor = config.nonWorkingTimeBodyBgColor;
         }
+
         if (groupOnly) {
           style.backgroundColor = config.groupOnlySlotColor;
         }

src/components/EventItem.jsx

@@ -46,11 +46,12 @@ class EventItem extends Component {
   constructor(props) {
     super(props);
 
-    const { left, top, width } = props;
+    const { left, top, width, height } = props;
     this.state = {
       left,
       top,
       width,
+      height,
       contentMousePosX: 0,
       eventItemLeftRect: 0,
       eventItemRightRect: 0,
@@ -71,9 +72,9 @@ class EventItem extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { left, top, width } = this.props;
-    if (prevProps.left !== left || prevProps.top !== top || prevProps.width !== width) {
-      this.setState({ left, top, width });
+    const { left, top, width, height } = this.props;
+    if (prevProps.left !== left || prevProps.top !== top || prevProps.width !== width || prevProps.height !== height) {
+      this.setState({ left, top, width, height });
     }
 
     // Re-subscribe when resize-related props change or when position/size changes
@@ -485,7 +486,7 @@ class EventItem extends Component {
       eventItemTemplateResolver,
     } = this.props;
     const { config, localeDayjs } = schedulerData;
-    const { left, width, top } = this.state;
+    const { left, width, top, height } = this.state;
     let roundCls;
     const popoverPlacement = config.eventItemPopoverPlacement;
     const isPopoverPlacementMousePosition = /(top|bottom)(Right|Left)MousePosition/.test(popoverPlacement);
@@ -524,7 +525,7 @@ class EventItem extends Component {
       <div
         className={`${roundCls} event-item`}
         key={eventItem.id}
-        style={{ height: config.eventItemHeight, backgroundColor: bgColor }}
+        style={{ height: height || config.eventItemHeight, backgroundColor: bgColor }}
       >
         <span
           style={{
@@ -559,6 +560,7 @@ class EventItem extends Component {
           left,
           width,
           top,
+          height,
           cursor: 'pointer',
           background: 'none',
           border: 'none',
@@ -688,6 +690,7 @@ EventItem.propTypes = {
   left: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
   top: PropTypes.number.isRequired,
+  height: PropTypes.number,
   isInPopover: PropTypes.bool.isRequired,
   leftIndex: PropTypes.number.isRequired,
   rightIndex: PropTypes.number.isRequired,

src/components/HeaderView.jsx

@@ -20,7 +20,7 @@ function HeaderView({ schedulerData, nonAgendaCellHeaderTemplateResolver }) {
 
   // Week number row generation
   const weekNumberRow = useMemo(() => {
-    if (!showWeekNumber) return null;
+    if (!showWeekNumber || schedulerData.isVerticalResourceView()) return null;
 
     const weekGroups = [];
     let currentWeekKey = null;
@@ -59,12 +59,19 @@ function HeaderView({ schedulerData, nonAgendaCellHeaderTemplateResolver }) {
       textAlign: 'center',
     };
 
-    return weekGroups.map(group => (
-      <th key={`week-${group.year}-${group.week}`} colSpan={group.colspan} style={cellStyle}>
-        W{group.week}
-      </th>
-    ));
-  }, [showWeekNumber, headers, localeDayjs, config.headerBorderColor]);
+    return weekGroups.map(group => {
+      if (group.week == null || group.year == null) return null;
+      return (
+        <th
+          key={`week-${group.year}-${group.week}`}
+          colSpan={group.colspan}
+          style={{ ...cellStyle, width: group.colspan * cellWidth, minWidth: group.colspan * cellWidth }}
+        >
+          W{group.week}
+        </th>
+      );
+    });
+  }, [showWeekNumber, headers, localeDayjs, config.headerBorderColor, cellWidth, schedulerData]);
 
   // Extract common style creation logic
   const createCellStyle = useCallback(
@@ -120,6 +127,17 @@ function HeaderView({ schedulerData, nonAgendaCellHeaderTemplateResolver }) {
 
   // Memoize header list generation
   const headerList = useMemo(() => {
+    if (schedulerData.isVerticalResourceView()) {
+      return headers.map(item => {
+        const style = { width: cellWidth, minWidth: cellWidth };
+        return (
+          <th key={`header-${item.id}`} className="header3-text" style={style}>
+            <div>{item.name}</div>
+          </th>
+        );
+      });
+    }
+
     if (cellUnit === CellUnit.Hour) {
       const result = [];
       const lastIndex = headers.length - minuteStepsInHour;
@@ -161,6 +179,7 @@ function HeaderView({ schedulerData, nonAgendaCellHeaderTemplateResolver }) {
     createCellStyle,
     getCellFormat,
     renderCellContent,
+    schedulerData.isVerticalResourceView,
   ]);
 
   return (

src/components/ResourceEvents.jsx

@@ -276,14 +276,20 @@ class ResourceEvents extends PureComponent {
     let safeRightIndex = Math.max(1, rightIndex, safeLeftIndex + 1);
     safeRightIndex = Math.min(safeRightIndex, maxRightIndex);
 
-    const startTime = headers[safeLeftIndex].time;
-    let 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);
+    let startTime, endTime;
+    if (schedulerData.isVerticalResourceView()) {
+      startTime = resourceEvents.slotId;
+      endTime = localeDayjs(new Date(startTime)).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
@@ -542,7 +548,14 @@ class ResourceEvents extends PureComponent {
               width = evt.span * cellWidth - (index > 0 ? 5 : 6) > 0 ? evt.span * cellWidth - (index > 0 ? 5 : 6) : 0;
             }
 
-            const top = marginTop + idx * config.eventItemLineHeight;
+            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;
+            }
             const eventKey = `${evt.eventItem.id}_${resourceEvents.slotId}_${index}`;
             const eventItem = (
               <EventItem
@@ -556,6 +569,7 @@ class ResourceEvents extends PureComponent {
                 left={left}
                 width={width}
                 top={top}
+                height={height}
                 leftIndex={index}
                 rightIndex={index + evt.span}
                 // Passing through functional props

src/components/ResourceView.jsx

@@ -30,7 +30,7 @@ function ResourceView({
   selectedResourceIds,
 }) {
   const { renderData } = schedulerData;
-  const width = schedulerData.getResourceTableWidth() - 2;
+  const width = schedulerData.getResourceTableWidth();
   const paddingBottom = contentScrollbarHeight;
   const displayRenderData = renderData.filter(o => o.render);
 
@@ -148,6 +148,21 @@ function ResourceView({
   };
 
   const resourceList = displayRenderData.map(item => {
+    if (schedulerData.isVerticalResourceView()) {
+      const timeLabel = schedulerData.localeDayjs(new Date(item.slotName)).format('HH:mm');
+      return (
+        <tr key={item.slotId} style={{ height: item.rowHeight }}>
+          <td
+            data-resource-id={item.slotId}
+            style={{ height: item.rowHeight, minHeight: item.rowHeight, textAlign: 'center' }}
+            className="header2-text"
+          >
+            <span>{timeLabel}</span>
+          </td>
+        </tr>
+      );
+    }
+
     const indents = [];
     for (let i = 0; i < item.indent; i += 1) {
       indents.push(<span key={`es${i}`} className="expander-space" />);