react-big-schedule 6.1.1-beta.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/ResourceEvents.js

@@ -291,10 +291,14 @@ 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 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 (schedulerData.isVerticalResourceView()) {
-      startTime = resourceEvents.slotId;
-      endTime = localeDayjs(new Date(startTime)).add(config.minuteStep, 'minutes').format(DATETIME_FORMAT);
+    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;
@@ -304,7 +308,7 @@ class ResourceEvents extends PureComponent {
     }
 
     // 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({

package/dist/components/SchedulerData.js

@@ -23,6 +23,8 @@ export default class SchedulerData {
     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;
@@ -370,7 +372,8 @@ 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() {
@@ -385,10 +388,16 @@ 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;
   }
@@ -397,9 +406,10 @@ export default class SchedulerData {
     const schedulerWidth = this.getSchedulerWidth();
     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);
+    // 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;
@@ -603,6 +613,12 @@ export default class SchedulerData {
     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;

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

@@ -41,11 +41,21 @@ const initDndContext = (schedulerData, dndSources) => {
  * @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,
@@ -72,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);
@@ -110,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) {
@@ -606,31 +602,38 @@ function Scheduler(props) {
     width: `${width}px`,
     tableLayout: 'fixed'
   }), [width]);
-  return /*#__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
+  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/scheduler.js

@@ -15,7 +15,7 @@ export default {
   underneathHeight: 20,
   schedulerMaxHeight: 0,
   tableHeaderHeight: 40,
-  schedulerContentHeight: '500px',
+  schedulerContentHeight: '100%',
   responsiveByParent: false,
   agendaResourceTableWidth: 160,
   agendaMaxEventWidth: 100,

package/dist/css/style.css

@@ -82,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,

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.1-beta.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",