react-big-schedule 6.1.0 → 6.1.1-beta.0

package/dist/components/BodyView.js

@@ -1,5 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+
+/**
+ * Render the table body (<tbody>) containing resource rows and cells based on schedulerData.
+ * @param {object} schedulerData - Scheduler state and helpers. Expected properties used: `renderData` (array of row descriptors with `slotId`, `render`, `rowHeight`, `groupOnly`, `nonWorkingTime`), `headers` (array of header descriptors with `time` and `nonWorkingTime`), `config` (including `nonWorkingTimeBodyBgColor` and `groupOnlySlotColor`), `behaviors` (optional `getNonAgendaViewBodyCellBgColorFunc`), `getContentCellWidth()` and `isVerticalResourceView()`.
+ * @returns {JSX.Element} The rendered `<tbody>` element containing a `<tr>` per rendered row and `<td>` cells for each header with computed inline styles.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 function BodyView({
   schedulerData
@@ -11,17 +17,25 @@ function BodyView({
     behaviors
   } = schedulerData;
   const width = schedulerData.getContentCellWidth();
-  const tableRows = renderData.filter(o => o.render).map(({
-    slotId,
-    groupOnly,
-    rowHeight
-  }) => {
-    const rowCells = headers.map((header, index) => {
-      const key = `${slotId}_${header.time}`;
-      const style = index === headers.length - 1 ? {} : {
-        width
+  const tableRows = renderData.filter(o => o.render).map(row => {
+    const {
+      slotId,
+      groupOnly,
+      rowHeight
+    } = row;
+    const rowCells = headers.map(header => {
+      // vertical view: every header shares one time, the resource id tells the columns apart
+      const key = `${slotId}_${header.id ?? header.time}`;
+      const style = {
+        width,
+        minWidth: width
       };
-      if (header.nonWorkingTime) {
+      const isVertical = schedulerData.isVerticalResourceView();
+      if (isVertical) {
+        if (row.nonWorkingTime) {
+          style.backgroundColor = config.nonWorkingTimeBodyBgColor;
+        }
+      } else if (header.nonWorkingTime) {
         style.backgroundColor = config.nonWorkingTimeBodyBgColor;
       }
       if (groupOnly) {

package/dist/components/EventItem.js

@@ -52,12 +52,14 @@ class EventItem extends Component {
     const {
       left,
       top,
-      width
+      width,
+      height
     } = props;
     this.state = {
       left,
       top,
       width,
+      height,
       contentMousePosX: 0,
       eventItemLeftRect: 0,
       eventItemRightRect: 0
@@ -78,13 +80,15 @@ class EventItem extends Component {
     const {
       left,
       top,
-      width
+      width,
+      height
     } = this.props;
-    if (prevProps.left !== left || prevProps.top !== top || prevProps.width !== width) {
+    if (prevProps.left !== left || prevProps.top !== top || prevProps.width !== width || prevProps.height !== height) {
       this.setState({
         left,
         top,
-        width
+        width,
+        height
       });
     }
 
@@ -516,7 +520,8 @@ class EventItem extends Component {
     const {
       left,
       width,
-      top
+      top,
+      height
     } = this.state;
     let roundCls;
     const popoverPlacement = config.eventItemPopoverPlacement;
@@ -552,7 +557,7 @@ class EventItem extends Component {
     let eventItemTemplate = /*#__PURE__*/_jsx("div", {
       className: `${roundCls} event-item`,
       style: {
-        height: config.eventItemHeight,
+        height: height || config.eventItemHeight,
         backgroundColor: bgColor
       },
       children: /*#__PURE__*/_jsx("span", {
@@ -575,6 +580,7 @@ class EventItem extends Component {
         left,
         width,
         top,
+        height,
         cursor: 'pointer',
         background: 'none',
         border: 'none',
@@ -697,6 +703,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,

package/dist/components/HeaderView.js

@@ -32,7 +32,7 @@ function HeaderView({
 
   // Week number row generation
   const weekNumberRow = useMemo(() => {
-    if (!showWeekNumber) return null;
+    if (!showWeekNumber || schedulerData.isVerticalResourceView()) return null;
     const weekGroups = [];
     let currentWeekKey = null;
     let currentWeek = null;
@@ -74,12 +74,19 @@ function HeaderView({
       padding: '4px 8px',
       textAlign: 'center'
     };
-    return weekGroups.map(group => /*#__PURE__*/_jsxs("th", {
-      colSpan: group.colspan,
-      style: cellStyle,
-      children: ["W", group.week]
-    }, `week-${group.year}-${group.week}`));
-  }, [showWeekNumber, headers, localeDayjs, config.headerBorderColor]);
+    return weekGroups.map(group => {
+      if (group.week == null || group.year == null) return null;
+      return /*#__PURE__*/_jsxs("th", {
+        colSpan: group.colspan,
+        style: {
+          ...cellStyle,
+          width: group.colspan * cellWidth,
+          minWidth: group.colspan * cellWidth
+        },
+        children: ["W", group.week]
+      }, `week-${group.year}-${group.week}`);
+    });
+  }, [showWeekNumber, headers, localeDayjs, config.headerBorderColor, cellWidth, schedulerData]);
 
   // Extract common style creation logic
   const createCellStyle = useCallback((item, width, isLastCell) => {
@@ -127,6 +134,21 @@ function HeaderView({
 
   // Memoize header list generation
   const headerList = useMemo(() => {
+    if (schedulerData.isVerticalResourceView()) {
+      return headers.map(item => {
+        const style = {
+          width: cellWidth,
+          minWidth: cellWidth
+        };
+        return /*#__PURE__*/_jsx("th", {
+          className: "header3-text",
+          style: style,
+          children: /*#__PURE__*/_jsx("div", {
+            children: item.name
+          })
+        }, `header-${item.id}`);
+      });
+    }
     if (cellUnit === CellUnit.Hour) {
       const result = [];
       const lastIndex = headers.length - minuteStepsInHour;
@@ -152,7 +174,7 @@ function HeaderView({
       const formattedList = cellFormat.split('|').map(format => datetime.format(format));
       return renderCellContent(item, formattedList, style);
     });
-  }, [cellUnit, headers, minuteStepsInHour, cellWidth, config, localeDayjs, createCellStyle, getCellFormat, renderCellContent]);
+  }, [cellUnit, headers, minuteStepsInHour, cellWidth, config, localeDayjs, createCellStyle, getCellFormat, renderCellContent, schedulerData.isVerticalResourceView]);
   return /*#__PURE__*/_jsxs("thead", {
     children: [weekNumberRow && /*#__PURE__*/_jsx("tr", {
       style: {

package/dist/components/ResourceEvents.js

@@ -291,10 +291,16 @@ class ResourceEvents extends PureComponent {
     const maxRightIndex = Math.min(headers.length, resourceEvents.headerItems.length);
     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
@@ -535,7 +541,14 @@ class ResourceEvents extends PureComponent {
             } else {
               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 = /*#__PURE__*/_jsx(EventItem, {
               schedulerData: schedulerData,
@@ -547,6 +560,7 @@ class ResourceEvents extends PureComponent {
               left: left,
               width: width,
               top: top,
+              height: height,
               leftIndex: index,
               rightIndex: index + evt.span
               // Passing through functional props

package/dist/components/ResourceView.js

@@ -33,7 +33,7 @@ function ResourceView({
   const {
     renderData
   } = schedulerData;
-  const width = schedulerData.getResourceTableWidth() - 2;
+  const width = schedulerData.getResourceTableWidth();
   const paddingBottom = contentScrollbarHeight;
   const displayRenderData = renderData.filter(o => o.render);
   const handleToggleExpand = item => {
@@ -135,6 +135,26 @@ function ResourceView({
     }, item.slotId);
   };
   const resourceList = displayRenderData.map(item => {
+    if (schedulerData.isVerticalResourceView()) {
+      const timeLabel = schedulerData.localeDayjs(new Date(item.slotName)).format('HH:mm');
+      return /*#__PURE__*/_jsx("tr", {
+        style: {
+          height: item.rowHeight
+        },
+        children: /*#__PURE__*/_jsx("td", {
+          "data-resource-id": item.slotId,
+          style: {
+            height: item.rowHeight,
+            minHeight: item.rowHeight,
+            textAlign: 'center'
+          },
+          className: "header2-text",
+          children: /*#__PURE__*/_jsx("span", {
+            children: timeLabel
+          })
+        })
+      }, item.slotId);
+    }
     const indents = [];
     for (let i = 0; i < item.indent; i += 1) {
       indents.push(/*#__PURE__*/_jsx("span", {

package/dist/components/SchedulerData.js

@@ -16,7 +16,7 @@ export default class SchedulerData {
     this.eventGroups = [];
     this.eventGroupsAutoGenerated = true;
     this.viewType = viewType;
-    this.cellUnit = viewType === ViewType.Day ? CellUnit.Hour : CellUnit.Day;
+    this.cellUnit = viewType === ViewType.Day || viewType === ViewType.VerticalResource ? CellUnit.Hour : CellUnit.Day;
     this.showAgenda = showAgenda;
     this.isEventPerspective = isEventPerspective;
     this.resizing = false;
@@ -102,6 +102,9 @@ export default class SchedulerData {
   getVersion() {
     return this.version;
   }
+  isVerticalResourceView() {
+    return this.viewType === ViewType.VerticalResource;
+  }
   setSchedulerLocale(preset) {
     if (!preset) return;
     this.localeDayjs.locale(preset);
@@ -117,6 +120,10 @@ export default class SchedulerData {
   setResources(resources) {
     this._validateResource(resources);
     this.resources = Array.from(new Set(resources));
+    // vertical view builds its headers from the resources
+    if (this.isVerticalResourceView()) {
+      this._createHeaders();
+    }
     this._createRenderData();
     this.setScrollToSpecialDayjs(true);
     this.bumpVersion();
@@ -162,6 +169,9 @@ export default class SchedulerData {
     const existedResources = this.resources.filter(x => x.id === resource.id);
     if (existedResources.length === 0) {
       this.resources.push(resource);
+      if (this.isVerticalResourceView()) {
+        this._createHeaders();
+      }
       this._createRenderData();
       this.bumpVersion();
     }
@@ -230,10 +240,11 @@ export default class SchedulerData {
     this.showAgenda = showAgenda;
     this.isEventPerspective = isEventPerspective;
     const isCustomView = viewType === ViewType.Custom || viewType === ViewType.Custom1 || viewType === ViewType.Custom2;
-
-    // Force built-in views only; custom views can provide their own cellUnit via custom date behavior.
-    if (!isCustomView && viewType !== ViewType.Day) {
+    const isVerticalView = viewType === ViewType.VerticalResource;
+    if (!isCustomView && viewType !== ViewType.Day && !isVerticalView) {
       this.cellUnit = CellUnit.Day;
+    } else if (viewType === ViewType.Day || isVerticalView) {
+      this.cellUnit = CellUnit.Hour;
     }
 
     // If showAgenda or isEventPerspective changed, force reload
@@ -273,7 +284,7 @@ export default class SchedulerData {
           if (now >= start && now < end) {
             date = now.startOf('day');
           }
-          if (viewType === ViewType.Day) {
+          if (viewType === ViewType.Day || viewType === ViewType.VerticalResource) {
             this.startDate = this.localeDayjs(new Date(date)).startOf('day');
             this.endDate = this.startDate;
             this.cellUnit = CellUnit.Hour;
@@ -365,7 +376,8 @@ export default class SchedulerData {
   getSchedulerHeight() {
     // Use the header height tracked in SchedulerData (set via _setSchedulerHeaderHeight)
     const headerHeight = this.schedulerHeaderHeight || 0;
-    const baseHeight = this.documentHeight - headerHeight - this.config.tableHeaderHeight - (this.config.underneathHeight || 0);
+    const underneathHeight = this.config.underneathHeight || 0;
+    const baseHeight = this.documentHeight - headerHeight - this.config.tableHeaderHeight - underneathHeight;
     const validBaseHeight = baseHeight > 0 ? baseHeight : 0;
     if (this.isSchedulerResponsive() && this.config.schedulerHeight?.endsWith?.('%')) {
       return parseInt(validBaseHeight * Number(this.config.schedulerHeight.slice(0, -1)) / 100, 10);
@@ -383,7 +395,14 @@ export default class SchedulerData {
   getContentCellWidth() {
     const contentCellConfigWidth = this.getContentCellConfigWidth();
     const schedulerWidth = this.getSchedulerWidth();
-    return this.isContentViewResponsive() ? parseInt(schedulerWidth * Number(contentCellConfigWidth.slice(0, -1)) / 100, 10) : contentCellConfigWidth;
+    const cellWidth = this.isContentViewResponsive() ? parseInt(schedulerWidth * Number(contentCellConfigWidth.slice(0, -1)) / 100, 10) : contentCellConfigWidth;
+
+    // vertical view: resources are the columns, so they share the width the time column doesn't need
+    if (this.isVerticalResourceView() && this.isSchedulerResponsive() && !this.isResourceViewResponsive() && this.headers?.length) {
+      const fillWidth = Math.floor((schedulerWidth - this.getResourceTableConfigWidth()) / this.headers.length);
+      return Math.max(cellWidth, fillWidth);
+    }
+    return cellWidth;
   }
   getContentTableWidth() {
     return this.headers.length * this.getContentCellWidth();
@@ -566,7 +585,8 @@ export default class SchedulerData {
       [ViewType.Day]: 'dayResourceTableWidth',
       [ViewType.Month]: 'monthResourceTableWidth',
       [ViewType.Year]: 'yearResourceTableWidth',
-      [ViewType.Quarter]: 'quarterResourceTableWidth'
+      [ViewType.Quarter]: 'quarterResourceTableWidth',
+      [ViewType.VerticalResource]: 'customResourceTableWidth'
     };
     const configProperty = viewConfigMap[this.viewType] || 'customResourceTableWidth';
     return this.config[configProperty];
@@ -577,7 +597,8 @@ export default class SchedulerData {
       [ViewType.Day]: 'dayCellWidth',
       [ViewType.Month]: 'monthCellWidth',
       [ViewType.Year]: 'yearCellWidth',
-      [ViewType.Quarter]: 'quarterCellWidth'
+      [ViewType.Quarter]: 'quarterCellWidth',
+      [ViewType.VerticalResource]: 'customCellWidth'
     };
     const configProperty = viewConfigMap[this.viewType] || 'customCellWidth';
     return this.config[configProperty];
@@ -686,6 +707,7 @@ export default class SchedulerData {
         this.endDate = this.startDate.endOf('isoWeek');
         break;
       case ViewType.Day:
+      case ViewType.VerticalResource:
         this.startDate = (date !== undefined ? this.selectDate : this.startDate.add(num, 'days')).startOf('day');
         this.endDate = this.startDate;
         break;
@@ -716,15 +738,14 @@ export default class SchedulerData {
         break;
     }
   }
-
-  // Previous Code
   _createHeaders() {
-    const headers = [];
+    const timeSlots = [];
     let start = this.localeDayjs(new Date(this.startDate));
     let end = this.localeDayjs(new Date(this.endDate));
     let header = start;
+    const width = this.getContentCellWidth();
     if (this.showAgenda) {
-      headers.push({
+      timeSlots.push({
         time: header.format(DATETIME_FORMAT),
         nonWorkingTime: false
       });
@@ -750,7 +771,7 @@ export default class SchedulerData {
           if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
             const time = header.format(DATETIME_FORMAT);
             const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-            headers.push({
+            timeSlots.push({
               time,
               nonWorkingTime
             });
@@ -761,12 +782,17 @@ export default class SchedulerData {
     } else if (this.cellUnit === CellUnit.Day) {
       while (header >= start && header <= end) {
         const time = header.format(DATETIME_FORMAT);
+        const style = {
+          width,
+          minWidth: width
+        };
         const dayOfWeek = header.day();
         if (this.config.displayWeekend || dayOfWeek !== 0 && dayOfWeek !== 6) {
           const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-          headers.push({
+          timeSlots.push({
             time,
-            nonWorkingTime
+            nonWorkingTime,
+            style
           });
         }
         header = header.add(1, 'days');
@@ -774,7 +800,7 @@ export default class SchedulerData {
     } else if (this.cellUnit === CellUnit.Week) {
       while (header >= start && header <= end) {
         const time = header.format(DATE_FORMAT);
-        headers.push({
+        timeSlots.push({
           time
         });
         header = header.add(1, 'weeks').startOf('isoWeek');
@@ -782,7 +808,7 @@ export default class SchedulerData {
     } else if (this.cellUnit === CellUnit.Month) {
       while (header >= start && header <= end) {
         const time = header.format(DATE_FORMAT);
-        headers.push({
+        timeSlots.push({
           time
         });
         header = header.add(1, 'months').startOf('month');
@@ -790,13 +816,23 @@ export default class SchedulerData {
     } else if (this.cellUnit === CellUnit.Year) {
       while (header >= start && header <= end) {
         const time = header.format(DATE_FORMAT);
-        headers.push({
+        timeSlots.push({
           time
         });
         header = header.add(1, 'years').startOf('year');
       }
     }
-    this.headers = headers;
+    this.timeSlots = timeSlots;
+    if (this.isVerticalResourceView()) {
+      const currentViewDate = this.localeDayjs(new Date(this.startDate)).format(DATETIME_FORMAT);
+      this.headers = this.resources.map(r => ({
+        ...r,
+        time: currentViewDate,
+        nonWorkingTime: false
+      }));
+    } else {
+      this.headers = timeSlots;
+    }
   }
   _createInitHeaderEvents(header) {
     const start = this.localeDayjs(new Date(header.time));
@@ -815,6 +851,10 @@ export default class SchedulerData {
       } else {
         endValue = start.add(1, incrementUnit).format(DATETIME_FORMAT);
       }
+    } else if (this.isVerticalResourceView()) {
+      // In vertical view, headers are resources. They don't have a time span.
+      // But we need a start/end for the headerEvent structure.
+      endValue = startValue;
     } else {
       const {
         amount,
@@ -832,7 +872,12 @@ export default class SchedulerData {
       count: 0,
       addMore: 0,
       addMoreIndex: 0,
-      events: Array(3)
+      events: [],
+      id: header.id || header.time,
+      style: header.style || {
+        width: this.getContentCellWidth(),
+        minWidth: this.getContentCellWidth()
+      }
     };
   }
   _createHeaderEvent(render, span, eventItem) {
@@ -879,7 +924,13 @@ export default class SchedulerData {
     this.eventGroups = eventGroups;
   }
   _createInitRenderData(isEventPerspective, eventGroups, resources, headers) {
-    const slots = isEventPerspective ? eventGroups : resources;
+    const slots = this.isVerticalResourceView() ? this.timeSlots.map(ts => ({
+      ...ts,
+      id: ts.time,
+      name: ts.time,
+      slotId: ts.time,
+      slotName: ts.time
+    })) : isEventPerspective ? eventGroups : resources;
     const slotTree = [];
     const slotMap = new Map();
     slots.forEach(slot => {
@@ -974,7 +1025,7 @@ export default class SchedulerData {
   // _createRenderData. Headers only cover the visible window (and visible days), so the event is
   // clamped consistently across views, and calendar-aware dayjs math keeps DST days at one cell.
   _getSpan(startTime, endTime, headers) {
-    if (this.showAgenda) return 1;
+    if (this.showAgenda || this.isVerticalResourceView()) return 1;
     const eventStart = normalizeEventStart(startTime);
     const eventEnd = normalizeEventEnd(endTime);
     const {
@@ -1054,7 +1105,18 @@ export default class SchedulerData {
     const cellMaxEventsCountValue = 30;
     this.events.forEach(item => {
       let targetSlotIds = [];
-      if (this.isEventPerspective) {
+      if (this.isVerticalResourceView()) {
+        const eventStart = new Date(item.start);
+        const eventEnd = new Date(item.end);
+        this.timeSlots.forEach(ts => {
+          // Check if the time slot overlaps with the event's time
+          const tsStart = new Date(ts.time);
+          const tsEnd = this.localeDayjs(ts.time).add(this.config.minuteStep, 'minutes').toDate();
+          if (tsEnd > eventStart && tsStart < eventEnd) {
+            targetSlotIds.push(ts.time);
+          }
+        });
+      } else if (this.isEventPerspective) {
         targetSlotIds = [this._getEventSlotId(item)];
       } else if (item.resourceIds && item.resourceIds.length > 0) {
         // Multi-resource event
@@ -1072,9 +1134,18 @@ export default class SchedulerData {
           const eventEnd = normalizeEventEnd(item.end).toDate();
           let pos = -1;
           resourceEvents.headerItems.forEach((header, index) => {
-            const headerStart = new Date(header.start);
-            const headerEnd = new Date(header.end);
-            if (headerEnd > eventStart && headerStart < eventEnd) {
+            let isOverlapping = false;
+            if (this.isVerticalResourceView()) {
+              // In vertical view, headers are resources. Check if event belongs to this resource.
+              const itemResourceIds = item.resourceIds || [item.resourceId];
+              const targetId = header.id;
+              isOverlapping = itemResourceIds.includes(targetId);
+            } else {
+              const headerStart = new Date(header.start);
+              const headerEnd = new Date(header.end);
+              isOverlapping = headerEnd > eventStart && headerStart < eventEnd;
+            }
+            if (isOverlapping) {
               header.count += 1;
               if (header.count > resourceEvents.rowMaxCount) {
                 resourceEvents.rowMaxCount = header.count;
@@ -1087,12 +1158,18 @@ export default class SchedulerData {
                 while (header.events[tmp] !== undefined) tmp += 1;
                 pos = tmp;
               }
-              let render = headerStart <= eventStart || index === 0;
-              if (render === false) {
-                const previousHeader = resourceEvents.headerItems[index - 1];
-                const previousHeaderStart = new Date(previousHeader.start);
-                const previousHeaderEnd = new Date(previousHeader.end);
-                if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
+              let render = false;
+              if (this.isVerticalResourceView()) {
+                render = true;
+              } else {
+                const headerStart = new Date(header.start);
+                render = headerStart <= eventStart || index === 0;
+                if (render === false) {
+                  const previousHeader = resourceEvents.headerItems[index - 1];
+                  const previousHeaderStart = new Date(previousHeader.start);
+                  const previousHeaderEnd = new Date(previousHeader.end);
+                  if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
+                }
               }
               header.events[pos] = this._createHeaderEvent(render, span, item);
             }

package/dist/components/index.js

@@ -24,81 +24,21 @@ const initDndContext = (schedulerData, dndSources) => {
 };
 
 /**
- * Renders the scheduler UI with resource and agenda views, responsive sizing, and drag-and-drop support.
- * Optimized to minimize unnecessary re-renders through memoized callbacks, stable refs, and
- * selectively updated state.
+ * Render the full scheduler table including the header toolbar, resource column, timeline header, and all resource event rows.
  *
  * @param {object} props - Component properties.
- * @param {SchedulerData} props.schedulerData - The view model driving all scheduler state,
- * configuration, layout data, and rendering logic.
- * @param {Array<DnDSource>} [props.dndSources] - Additional drag-and-drop sources merged into
- * the scheduler's DnD context on first mount. The DnD context is initialized once and never rebuilt.
- * @param {React.RefObject<HTMLElement>} [props.parentRef] - Ref to the parent container element.
- * When provided alongside `responsiveByParent: true` in config, a ResizeObserver tracks the
- * parent's dimensions and triggers layout updates instead of listening to the window resize event.
- * @param {function(SchedulerData):void} props.prevClick - Callback invoked when the user navigates
- * to the previous time range.
- * @param {function(SchedulerData):void} props.nextClick - Callback invoked when the user navigates
- * to the next time range.
- * @param {function(SchedulerData, object):void} props.onViewChange - Callback invoked when the
- * view type, agenda toggle, or event perspective changes.
- * @param {function(SchedulerData, string|Date):void} props.onSelectDate - Callback invoked when
- * the user selects a new date from the calendar popover.
- * @param {function(SchedulerData, object):void} [props.onSetAddMoreState] - Callback invoked when
- * a '+N more' overflow indicator is clicked, used to control the AddMorePopover visibility and position.
- * @param {function(SchedulerData, object, string):void} [props.updateEventStart] - Callback invoked
- * when the user resizes the start of an event.
- * @param {function(SchedulerData, object, string):void} [props.updateEventEnd] - Callback invoked
- * when the user resizes the end of an event.
- * @param {function(SchedulerData, object, string, string, string, string):void} [props.moveEvent] -
- * Callback invoked when an event is dragged to a new slot or time range.
- * @param {function} [props.movingEvent] - Callback invoked continuously while an event is being dragged.
- * * @param {function(SchedulerData, object, string, string, string, string, string, string):void}
- * [props.conflictOccurred] -
- * Callback invoked when a scheduling conflict is detected during create, move, or resize.
- * @param {function(SchedulerData, object):string} [props.subtitleGetter] - Returns a subtitle string
- * displayed in the event item popover.
- * @param {function(SchedulerData, object):void} [props.eventItemClick] - Callback invoked when an
- * event item is clicked.
- * @param {function(SchedulerData, object):void} [props.viewEventClick] - Callback invoked when the
- * primary action link in the event popover is clicked.
- * @param {string} [props.viewEventText] - Label text for the primary action link in the event popover.
- * @param {function(SchedulerData, object):void} [props.viewEvent2Click] - Callback invoked when the
- * secondary action link in the event popover is clicked.
- * @param {string} [props.viewEvent2Text] - Label text for the secondary action link in the event popover.
- * @param {function(SchedulerData, string, string, string, string, string, object):void} [props.newEvent] -
- * Callback invoked when a new event is created by clicking and dragging on an empty cell, or when
- * an external item is dropped into the scheduler.
- * @param {function} [props.eventItemTemplateResolver] - Returns a custom JSX element used to render
- * each event item, overriding the default appearance.
- * @param {function(SchedulerData, object):void} [props.slotClickedFunc] - Callback invoked when a
- * resource slot label in the left column is clicked.
- * @param {function(SchedulerData, string):void} [props.toggleExpandFunc] - Callback invoked when a
- * parent resource slot's expand or collapse control is clicked.
- * @param {function} [props.slotItemTemplateResolver] - Returns a custom JSX element used to render
- * each resource slot cell in the left column.
- * @param {function} [props.nonAgendaCellHeaderTemplateResolver] - Returns a custom JSX element used
- * to render individual header cells in the timeline header row.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollLeft] - Callback invoked
- * when the scheduler content is scrolled to the leftmost position.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollRight] - Callback invoked
- * when the scheduler content is scrolled to the rightmost position.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollTop] - Callback invoked
- * when the scheduler content is scrolled to the topmost position.
- * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollBottom] - Callback invoked
- * when the scheduler content is scrolled to the bottommost position.
- * @param {React.ReactNode} [props.leftCustomHeader] - Custom content rendered on the left side of
- * the scheduler header toolbar.
- * @param {React.ReactNode} [props.rightCustomHeader] - Custom content rendered on the right side of
- * the scheduler header toolbar.
- * @param {function} [props.CustomResourceHeader] - Optional component rendered inside the resource
- * column header cell, replacing the default resource name label.
- * @param {function} [props.CustomResourceCell] - Optional component rendered inside each resource
- * slot cell in the left column.
- * @param {object} [props.configTableHeaderStyle] - Optional inline style object merged into the
- * resource column header container, used to override default header styling.
- * @returns {JSX.Element} The root scheduler table element containing the header toolbar, resource
- * column, timeline header, and all resource event rows.
+ * @param {SchedulerData} props.schedulerData - View model that supplies configuration, layout, and rendering data for the scheduler.
+ * @param {Array<DnDSource>} [props.dndSources] - Additional drag-and-drop sources merged into the scheduler's DnD context on first mount.
+ * @param {React.RefObject<HTMLElement>} [props.parentRef] - Parent container ref used when `config.responsiveByParent` is true; a ResizeObserver tracks this element's size.
+ * @param {function(SchedulerData):void} props.prevClick - Called when navigating to the previous time range.
+ * @param {function(SchedulerData):void} props.nextClick - Called when navigating to the next time range.
+ * @param {function(SchedulerData, object):void} props.onViewChange - Called when the view type, agenda toggle, or event perspective changes.
+ * @param {function(SchedulerData, string|Date):void} props.onSelectDate - Called when a date is selected from the date picker.
+ * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollLeft] - Called when content reaches the leftmost scroll position.
+ * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollRight] - Called when content reaches the rightmost scroll position.
+ * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollTop] - Called when content reaches the topmost scroll position.
+ * @param {function(SchedulerData, HTMLElement, number):void} [props.onScrollBottom] - Called when content reaches the bottommost scroll position.
+ * @returns {JSX.Element} The root scheduler table element containing the rendered scheduler UI.
  */
 
 function Scheduler(props) {
@@ -369,7 +309,7 @@ function Scheduler(props) {
     weekNumberRowHeight
   } = config;
   const schedulerDataVersion = schedulerData.getVersion ? schedulerData.getVersion() : 0;
-  const schedulerWidth = schedulerData.getContentTableWidth() - 1;
+  const schedulerWidth = schedulerData.getContentTableWidth();
   const weekNumberRowStyle = useMemo(() => ({
     height: weekNumberRowHeight
   }), [weekNumberRowHeight]);
@@ -466,7 +406,7 @@ function Scheduler(props) {
       height: contentHeight,
       overflowX: 'auto',
       overflowY: 'auto',
-      width: resourceTableWidth + resourceScrollbarWidth - 2,
+      width: resourceTableWidth + resourceScrollbarWidth,
       margin: `0px -${contentScrollbarWidth}px 0px 0px`
     };
     if (config.schedulerMaxHeight > 0) {
@@ -598,6 +538,7 @@ function Scheduler(props) {
                 style: schedulerHeadInnerStyle,
                 children: /*#__PURE__*/_jsx("table", {
                   className: "scheduler-bg-table",
+                  style: schedulerInnerStyle,
                   children: /*#__PURE__*/_jsx(HeaderView, {
                     schedulerData: schedulerData,
                     schedulerDataVersion: schedulerDataVersion,
@@ -658,15 +599,25 @@ function Scheduler(props) {
     rightCustomHeader: rightCustomHeader,
     leftCustomHeader: leftCustomHeader
   }), [schedulerHeaderStyle, handleViewChange, schedulerData, onSelect, goNext, goBack, rightCustomHeader, leftCustomHeader, setSchedulerHeaderRef]);
+
+  // table-layout: fixed sizes columns from the first row (the toolbar, colSpan=2), so pin the resource column here
+  const resourceColumnWidth = schedulerData.showAgenda || !config.resourceViewEnabled ? undefined : schedulerData.getResourceTableWidth();
   const rootTableStyle = useMemo(() => ({
-    width: `${width}px`
+    width: `${width}px`,
+    tableLayout: 'fixed'
   }), [width]);
   return /*#__PURE__*/_jsxs("table", {
     id: "rbs-root",
-    className: "rbs",
+    className: `rbs ${schedulerData.isVerticalResourceView() ? 'vertical-view' : ''}`,
     style: rootTableStyle,
     ref: schedulerRootRef,
-    children: [/*#__PURE__*/_jsx("thead", {
+    children: [resourceColumnWidth !== undefined && /*#__PURE__*/_jsxs("colgroup", {
+      children: [/*#__PURE__*/_jsx("col", {
+        style: {
+          width: resourceColumnWidth
+        }
+      }), /*#__PURE__*/_jsx("col", {})]
+    }), /*#__PURE__*/_jsx("thead", {
       children: /*#__PURE__*/_jsx("tr", {
         children: /*#__PURE__*/_jsx("td", {
           colSpan: "2",

package/dist/config/default.js

@@ -8,7 +8,8 @@ export const ViewType = {
   Year: 4,
   Custom: 5,
   Custom1: 6,
-  Custom2: 7
+  Custom2: 7,
+  VerticalResource: 8
 };
 export const CellUnit = {
   Day: 0,

package/dist/config/scheduler.js

@@ -113,5 +113,10 @@ export default {
     viewType: ViewType.Year,
     showAgenda: false,
     isEventPerspective: false
+  }, {
+    viewName: 'Vertical',
+    viewType: ViewType.VerticalResource,
+    showAgenda: false,
+    isEventPerspective: false
   }]
 };

package/dist/css/style.css

@@ -51,7 +51,8 @@
 
 .rbs .scheduler-view {
   border: 1px solid #e9e9e9;
-  margin: 0 0 0 -1px;
+  position: relative;
+  left: -1px;
   padding: 0;
 }
 
@@ -90,6 +91,7 @@
   margin: 0;
   padding: 0;
   border-spacing: 0;
+  border-collapse: collapse;
 }
 
 .rbs table.resource-table,
@@ -165,6 +167,10 @@
   padding-right: 20px;
 }
 
+.rbs.vertical-view .event-item {
+  margin: 0 1px;
+}
+
 /* Rounded Borders */
 .rbs .round-all {
   border-radius: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "6.1.0",
+  "version": "6.1.1-beta.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",