react-big-schedule 6.1.0 → 7.0.0

package/README.md

@@ -567,19 +567,20 @@ Used to resolve the locale string of date label of Scheduler component.(Refer to
 
 #### schedulerWidth
 
-The width of Scheduler. Scheduler uses responsive layout so schedulerWidth should be a percentage,
-Scheduler in the responsive layout:
-`actual width of Scheduler = (SchedulerData.documentWidth - SchedulerData.config.besidesWidth) * SchedulerData.config.schedulerWidth`
-`SchedulerData.documentWidth` is the window width of browser (or the the parent width in case SchedulerData.config.responsiveByParent
-and Scheduler component prop parentRef is passed) and will change automatically when resized.
+The width of Scheduler. Scheduler uses responsive layout so schedulerWidth should be a percentage.
+
+The Scheduler renders inside a container that is `width: 100%` and `max-height: 100%` of its parent, so it fills the parent
+and follows it when resized (it measures that container with a `ResizeObserver`; `besidesWidth` is no longer needed).
+Resource columns keep their configured width and the time columns stretch to fill the rest.
+
+To size it differently, pass `className` (e.g. tailwind classes) or `style` to the `Scheduler` component, for example
+`<Scheduler className="w-1/2 max-h-[600px]" ... />`. Those win over the defaults, which have zero CSS specificity.
+When the parent has a fixed height the Scheduler scrolls inside it, otherwise it grows to fit its rows.
 
 #### responsiveByParent
 
-When true, Scheduler resposiveness will not be determined by the window width of browser but instead by the
-width of the of the parent (the parent ref must be passed to the Scheduler component prop named `parentRef`,
-in case it is not passed resposiveness will fall back to being determined by the window width).
-Meaning:
-`SchedulerData.documentWidth` is the width of the parent and will change automatically when resized
+Only needed to make the Scheduler's *height* follow a parent element: pass that element through the `parentRef` prop of the
+Scheduler component. Without `parentRef` the window height is used.
 
 #### schedulerMaxHeight
 
@@ -837,6 +838,23 @@ parentRef: PropTypes.object;
 
 ref of the component that is the parent of the Scheduler component
 
+#### className
+
+```js
+className: PropTypes.string;
+```
+
+Class names for the Scheduler's container (e.g. tailwind classes such as `w-1/2 max-h-[600px]`). They override the default
+`width: 100%` / `max-height: 100%`.
+
+#### style
+
+```js
+style: PropTypes.object;
+```
+
+Inline style for the Scheduler's container.
+
 #### prevClick
 
 ```js

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,14 +291,24 @@ 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);
+    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 = this.getSelectedResourceIds();
+    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({
@@ -535,7 +545,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 +564,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,13 +16,15 @@ 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;
     this.scrollToSpecialDayjs = false;
     this.documentWidth = 0;
     this.documentHeight = 0;
+    // true once the scheduler measures its own container, so besidesWidth (a window-based offset) is not applied
+    this.measuredByContainer = false;
     this.schedulerHeaderHeight = 0;
     this._shouldReloadViewType = false;
     this.version = 0;
@@ -102,6 +104,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 +122,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 +171,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 +242,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 +286,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;
@@ -359,13 +372,15 @@ export default class SchedulerData {
     return !!contentCellWidth.endsWith && contentCellWidth.endsWith('%');
   }
   getSchedulerWidth() {
-    const baseWidth = this.documentWidth - this.config.besidesWidth > 0 ? this.documentWidth - this.config.besidesWidth : 0;
+    const besidesWidth = this.measuredByContainer ? 0 : this.config.besidesWidth;
+    const baseWidth = this.documentWidth - besidesWidth > 0 ? this.documentWidth - besidesWidth : 0;
     return this.isSchedulerResponsive() ? parseInt(baseWidth * Number(this.config.schedulerWidth.slice(0, -1)) / 100, 10) : this.config.schedulerWidth;
   }
   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);
@@ -373,17 +388,31 @@ export default class SchedulerData {
     // fallback to max height if set, else just use base height
     return this.config.schedulerMaxHeight || validBaseHeight;
   }
-  getResourceTableWidth() {
+
+  // configured resource column width in px (config may be a percentage of the scheduler width)
+  _getConfiguredResourceTableWidth() {
     const resourceTableConfigWidth = this.getResourceTableConfigWidth();
+    return this.isResourceViewResponsive() ? parseInt(this.getSchedulerWidth() * Number(resourceTableConfigWidth.slice(0, -1)) / 100, 10) : resourceTableConfigWidth;
+  }
+  getResourceTableWidth() {
     const schedulerWidth = this.getSchedulerWidth();
-    let resourceTableWidth = this.isResourceViewResponsive() ? parseInt(schedulerWidth * Number(resourceTableConfigWidth.slice(0, -1)) / 100, 10) : resourceTableConfigWidth;
+    let resourceTableWidth = this._getConfiguredResourceTableWidth();
+    // only the few px left after the cells are stretched go to the resource column
     if (this.isSchedulerResponsive() && this.getContentTableWidth() + resourceTableWidth < schedulerWidth) resourceTableWidth = schedulerWidth - this.getContentTableWidth();
     return resourceTableWidth;
   }
   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;
+
+    // stretch the cells to fill the container instead of widening the resource column
+    if (this.isSchedulerResponsive() && !this.showAgenda && this.headers?.length) {
+      const resourceWidth = this.config.resourceViewEnabled === false ? 0 : this._getConfiguredResourceTableWidth();
+      const fillWidth = Math.floor((schedulerWidth - resourceWidth) / this.headers.length);
+      return Math.max(cellWidth, fillWidth);
+    }
+    return cellWidth;
   }
   getContentTableWidth() {
     return this.headers.length * this.getContentCellWidth();
@@ -566,7 +595,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,11 +607,18 @@ 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];
   }
+  _setMeasuredByContainer(measuredByContainer) {
+    if (this.measuredByContainer !== measuredByContainer) {
+      this.measuredByContainer = measuredByContainer;
+      this.bumpVersion();
+    }
+  }
   _setDocumentWidth(documentWidth) {
     if (documentWidth >= 0 && documentWidth !== this.documentWidth) {
       this.documentWidth = documentWidth;
@@ -686,6 +723,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 +754,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 +787,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 +798,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 +816,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 +824,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 +832,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 +867,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 +888,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 +940,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 +1041,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 +1121,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 +1150,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 +1174,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/SchedulerHeader.js

@@ -84,6 +84,7 @@ const SchedulerHeader = /*#__PURE__*/React.forwardRef(({
     align: "middle",
     justify: "space-between",
     style: {
+      marginInline: 0,
       ...style
     },
     children: [leftCustomHeader, /*#__PURE__*/_jsx(Col, {

package/dist/components/index.js

@@ -24,88 +24,38 @@ 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.
  */
 
+// content-box height: clientHeight includes the padding, which the scheduler cannot use
+const getInnerHeight = el => {
+  const {
+    paddingTop,
+    paddingBottom
+  } = window.getComputedStyle(el);
+  return el.clientHeight - (parseFloat(paddingTop) || 0) - (parseFloat(paddingBottom) || 0);
+};
 function Scheduler(props) {
   const {
     schedulerData,
     dndSources,
     parentRef,
+    className,
+    style,
     prevClick,
     nextClick,
     onViewChange,
@@ -132,6 +82,7 @@ function Scheduler(props) {
   });
   const [, setRenderTrigger] = useState(0);
   const schedulerRootRef = useRef(null);
+  const containerRef = useRef(null);
 
   // Layout/header refs - declare before setSchedulerHeaderRef useCallback
   const schedulerHeaderRef = useRef(null);
@@ -170,54 +121,39 @@ function Scheduler(props) {
     }
     return undefined;
   }, [schedulerData]);
-  const onWindowResize = useCallback(() => {
-    schedulerData.beginBatch();
-    try {
-      schedulerData._setDocumentWidth(document.documentElement.clientWidth);
-      schedulerData._setDocumentHeight(document.documentElement.clientHeight);
-    } finally {
-      schedulerData.endBatch();
-    }
-  }, [schedulerData]);
+
+  // Width comes from the scheduler's own wrapper (100% wide of its parent). `parentRef` only supplies the height
+  // when responsiveByParent is on.
   useEffect(() => {
-    if (schedulerData.isSchedulerResponsive() && !schedulerData.config.responsiveByParent || parentRef === undefined) {
+    const {
+      responsiveByParent
+    } = schedulerData.config;
+    const parentEl = responsiveByParent ? parentRef?.current : null;
+    // the wrapper is 100% wide of its parent (padding excluded), so it gives the width in both modes
+    const widthEl = containerRef.current;
+    if (!widthEl) return undefined;
+    const update = () => {
       schedulerData.beginBatch();
       try {
-        schedulerData._setDocumentWidth(document.documentElement.clientWidth);
-        schedulerData._setDocumentHeight(document.documentElement.clientHeight);
+        schedulerData._setMeasuredByContainer(true);
+        schedulerData._setDocumentWidth(widthEl.clientWidth);
+        if (responsiveByParent) {
+          schedulerData._setDocumentHeight(parentEl ? getInnerHeight(parentEl) : document.documentElement.clientHeight);
+        }
       } finally {
         schedulerData.endBatch();
       }
-      window.addEventListener('resize', onWindowResize);
-      return () => window.removeEventListener('resize', onWindowResize);
-    }
-  }, [schedulerData, parentRef, onWindowResize]);
-  useEffect(() => {
-    const parentEl = parentRef?.current;
-    if (parentRef !== undefined && schedulerData.config.responsiveByParent && parentEl) {
-      const updateParentSize = () => {
-        schedulerData.beginBatch();
-        try {
-          schedulerData._setDocumentWidth(parentEl.clientWidth);
-          schedulerData._setDocumentHeight(parentEl.clientHeight);
-        } finally {
-          schedulerData.endBatch();
-        }
-      };
-      updateParentSize();
-
-      // Disconnect any previous observer to prevent memory leaks
-      if (ulObserverRef.current) {
-        ulObserverRef.current.disconnect();
-      }
-      ulObserverRef.current = new ResizeObserver(updateParentSize);
-      ulObserverRef.current.observe(parentEl);
-      return () => {
-        if (ulObserverRef.current) {
-          ulObserverRef.current.disconnect();
-        }
-      };
-    }
+    };
+    update();
+    ulObserverRef.current = new ResizeObserver(update);
+    ulObserverRef.current.observe(widthEl);
+    if (parentEl) ulObserverRef.current.observe(parentEl);
+    const listenToWindow = responsiveByParent && !parentEl;
+    if (listenToWindow) window.addEventListener('resize', update);
+    return () => {
+      ulObserverRef.current?.disconnect();
+      if (listenToWindow) window.removeEventListener('resize', update);
+    };
   }, [parentRef, schedulerData]);
   useEffect(() => {
     if (schedulerData.config.responsiveByParent && schedulerHeaderEl) {
@@ -369,7 +305,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 +402,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 +534,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,28 +595,45 @@ 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",
-    style: rootTableStyle,
-    ref: schedulerRootRef,
-    children: [/*#__PURE__*/_jsx("thead", {
-      children: /*#__PURE__*/_jsx("tr", {
-        children: /*#__PURE__*/_jsx("td", {
-          colSpan: "2",
-          children: schedulerHeader
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    className: className ? `rbs-container ${className}` : 'rbs-container',
+    style: style,
+    children: /*#__PURE__*/_jsxs("table", {
+      id: "rbs-root",
+      className: `rbs ${schedulerData.isVerticalResourceView() ? 'vertical-view' : ''}`,
+      style: rootTableStyle,
+      ref: schedulerRootRef,
+      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",
+            children: schedulerHeader
+          })
         })
-      })
-    }), /*#__PURE__*/_jsx("tbody", {
-      children: tbodyContent
-    })]
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: tbodyContent
+      })]
+    })
   });
 }
 Scheduler.propTypes = {
   parentRef: PropTypes.object,
+  className: PropTypes.string,
+  style: PropTypes.object,
   schedulerData: PropTypes.object.isRequired,
   prevClick: PropTypes.func.isRequired,
   nextClick: PropTypes.func.isRequired,

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

@@ -15,7 +15,7 @@ export default {
   underneathHeight: 20,
   schedulerMaxHeight: 0,
   tableHeaderHeight: 40,
-  schedulerContentHeight: '500px',
+  schedulerContentHeight: '100%',
   responsiveByParent: false,
   agendaResourceTableWidth: 160,
   agendaMaxEventWidth: 100,
@@ -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;
 }
 
@@ -81,6 +82,14 @@
   margin-top: -1%;
 }
 
+/* Container: fills its parent. :where() keeps specificity at zero so any className (e.g. tailwind) or style prop wins. */
+:where(.rbs-container) {
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}
+
 /* Tables */
 .rbs table.resource-table,
 .rbs table.scheduler-bg-table,
@@ -90,6 +99,7 @@
   margin: 0;
   padding: 0;
   border-spacing: 0;
+  border-collapse: collapse;
 }
 
 .rbs table.resource-table,
@@ -165,6 +175,10 @@
   padding-right: 20px;
 }
 
+.rbs.vertical-view .event-item {
+  margin: 0 1px;
+}
+
 /* Rounded Borders */
 .rbs .round-all {
   border-radius: 14px;

package/dist/index.d.ts

@@ -121,6 +121,10 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
   dndSources?: DnDSource[];
   // biome-ignore lint/suspicious/noExplicitAny: legacy any usage
   parentRef?: React.RefObject<any>;
+  /** Class names for the scheduler's container, e.g. tailwind classes. They win over the default 100% width / max height. */
+  className?: string;
+  /** Inline style for the scheduler's container. */
+  style?: CSSProperties;
   // biome-ignore lint/suspicious/noExplicitAny: legacy any usage
   CustomResourceHeader?: React.ComponentType<any>;
   CustomResourceCell?: React.ComponentType<CustomResourceCellProps<EventType>>;
@@ -326,6 +330,7 @@ export interface State<EventType extends EventItem = EventItem> {
 
 export interface SchedulerDataConfig {
   schedulerWidth?: `${number}%`;
+  /** @deprecated The scheduler measures its own container now, so this offset is ignored. */
   besidesWidth?: number;
   underneathHeight?: number;
   schedulerMaxHeight?: number;

package/package.json

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