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

package/README.md

@@ -17,7 +17,7 @@ Unlock the potential of your React projects with react-big-schedule and revoluti
 
 ### This project code is forked from:
 
-- [react-big-scheduler](https://stephenchou1017.github.io/scheduler/#/).
+- [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler).
 - [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler).
 
 ## Installation
@@ -93,7 +93,7 @@ Special thanks to the following contributors:
 
 We would like to acknowledge the following projects for their inspiration and contributions:
 
-- [react-big-scheduler](https://stephenchou1017.github.io/scheduler/#/).
+- [react-big-scheduler](https://github.com/StephenChou1017/react-big-scheduler).
 - [react-big-scheduler-stch](https://github.com/hbatalhaStch/react-big-scheduler).
 
 ## Roadmap
@@ -240,10 +240,10 @@ constructor(date=dayjs().format(DATE_FORMAT), viewType = ViewType.Week,
   view type, and will render the time window of the `2022-12` month in `ViewType.Month` view type.
 - `viewType` is the initial view type, now Scheduler supports `Day`, `Week`, `Month`, `Quarter`, `Year` 5 built-in view types,
   in addition Scheduler now supports `Custom`, `Custom1`, `Custom2` 3 custom view types at the same time, in which you can control
-  the time window yourself, refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow). `viewType`,
+  the time window yourself, refer to [this example](https://react-big-schedule.vercel.app/custom-time). `viewType`,
   `showAgenda` and `isEventPerspective` are a group which should be contained in the SchedulerData.config.views array,
   and they together decide which view should be rendered. When `showAgenda` and `isEventPerspective` are both `false`,
-  Scheduler will render the resource view, refer to [this example](https://stephenchou1017.github.io/scheduler/#/views).
+  Scheduler will render the resource view, refer to [this example](https://react-big-schedule.vercel.app/basic).
 - `showAgenda` is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is
   read only.
 - `isEventPerspective` is a bool value, if true, Scheduler will display the task view of current view type. In
@@ -410,7 +410,7 @@ addResource(resource);
 ```
 
 Add the `resource` to the `SchedulerData.resources`, make sure that `resource.id` is not duplicated. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/addresource).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### addEventGroup
 
@@ -529,7 +529,7 @@ getViewEndDate();
 
 Returns a dayjs object with the endDate of the currently selected view.
 
-### Locale support(Refer to [this example](https://stephenchou1017.github.io/scheduler/#/locale) for details.)
+### Locale support(Refer to [this example](https://react-big-schedule.vercel.app/custom-time) for details.)
 
 #### SchedulerData.config.resourceName
 
@@ -567,25 +567,26 @@ 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
 
 The max height of Scheduler. If the desired height is bigger than the max height, the header row of Scheduler will be
 frozen and vertical scroll bar will appear, but this won't happen when the max height is set to `0`. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/freezefirstrow).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 **If you are using `responsiveByParent`, you can omit this setting or set it to `0` to ensure the Scheduler height conforms to the parent container.**
 When conforming to the parent container, the Scheduler will fill the available space and scroll bars will appear as needed.
@@ -619,7 +620,7 @@ Width of Scheduler table cells in resource view and task view of different view
 #### dayMaxEvents, weekMaxEvents, monthMaxEvents, yearMaxEvents, quarterMaxEvents
 
 Max events count of a cell in resource view and task view of different view types. A '+N more' will appear when exceeded.
-Refer to [this example](https://stephenchou1017.github.io/scheduler/#/addmore).
+Refer to [this example](https://react-big-schedule.vercel.app/add-more).
 
 #### eventItemHeight
 
@@ -696,13 +697,13 @@ Controls whether to create new event item in resource view and task view.
 #### crossResourceMove
 
 Controls whether to cross-slot move an event item in resource view and task view. If `false`, the `slotId` and `slotName`
-won't change in the `moveEvent` method. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/nocrossslotmove).
+won't change in the `moveEvent` method. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### checkConflict
 
 Controls whether to check conflicts when creating, resizing or moving an event item in resource view and task view. If
 `true`, Scheduler will call the `conflictOccurred` function if given. Refer to
-[this example](https://stephenchou1017.github.io/scheduler/#/overlapcheck).
+[this example](https://react-big-schedule.vercel.app/customization).
 
 #### scrollToSpecialDayjsEnabled
 
@@ -792,7 +793,7 @@ getSummary(schedulerData, headerEvents, slotId, slotName, headerStart, headerEnd
 ```
 
 Method that defines the summary text displayed in the Scheduler cells.Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/summary).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### getCustomDateFunc
 
@@ -801,7 +802,7 @@ getCustomDate(schedulerData, num, (date = undefined));
 ```
 
 Method that controls the start and end of time window when current view type is Custom, Custom1 or Custom2.Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow).
+to [this example](https://react-big-schedule.vercel.app/custom-time).
 
 #### getNonAgendaViewBodyCellBgColorFunc
 
@@ -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
@@ -932,7 +950,7 @@ rightCustomHeader: PropTypes.object;
 ```
 
 Component you need to put in the Scheduler header, it could be a div or a react component. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/customheader).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### conflictOccurred
 
@@ -951,7 +969,7 @@ eventItemTemplateResolver: PropTypes.func;
 eventItemTemplateResolver(schedulerData, event, bgColor, isStart, isEnd, mustAddCssClass, mustBeHeight, agendaMaxEventWidth);
 ```
 
-Use this function, you can customize the event style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customeventstyle).
+Use this function, you can customize the event style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 ### eventItemPopoverTemplateResolver
 
@@ -960,7 +978,7 @@ eventItemPopoverTemplateResolver: PropTypes.func;
 eventItemPopoverTemplateResolver(schedulerData, eventItem, title, start, end, statusColor);
 ```
 
-Use this function, you can customize the event's popover style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/custompopover).
+Use this function, you can customize the event's popover style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### slotItemTemplateResolver
 
@@ -978,7 +996,7 @@ nonAgendaCellHeaderTemplateResolver: PropTypes.func;
 nonAgendaCellHeaderTemplateResolver(schedulerData, item, formattedDateItems, style);
 ```
 
-Use this function, you can customize the table header cell style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtableheaders).
+Use this function, you can customize the table header cell style. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### onScrollLeft, onScrollRight
 
@@ -989,7 +1007,7 @@ onScrollRight: PropTypes.func;
 onScrollRight(schedulerData, schedulerContent, maxScrollLeft);
 ```
 
-Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).
+Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### onScrollTop, onScrollBottom
 
@@ -1000,7 +1018,7 @@ onScrollBottom: PropTypes.func;
 onScrollBottom(schedulerData, schedulerContent, maxScrollTop);
 ```
 
-Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).
+Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### slotClickedFunc
 
@@ -1009,7 +1027,7 @@ slotClickedFunc: PropTypes.func;
 ```
 
 If it's set, slots will be clickable, and will fire this function when a slot is clicked. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/resourceclickable).
+to [this example](https://react-big-schedule.vercel.app/customization).
 
 #### dndSources
 
@@ -1019,7 +1037,7 @@ dndSources: PropTypes.array;
 
 DnDSource array that registered to Scheduler. Use [DnDSource](https://github.com/ansulagrawal/react-big-schedule/blob/master/src/components/DnDSource.js),
 we can simplify the drag and drop coding in React-Big-Scheduler. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/draganddrop).
+to [this example](https://react-big-schedule.vercel.app/drag-and-drop).
 
 #### onSetAddMoreState
 
@@ -1030,7 +1048,7 @@ onSetAddMoreState(newState);
 
 Callback function fired when a '+N more' is clicked, is used to control the visibility and the position of the `AddMorePopover`.
 `newState` is a json such as {headerItem: headerItem, left: 20, top: 20, height: 100}. Refer
-to [this example](https://stephenchou1017.github.io/scheduler/#/addmore).
+to [this example](https://react-big-schedule.vercel.app/add-more).
 
 #### subtitleGetter
 

package/dist/components/EventItem.js

@@ -720,7 +720,8 @@ EventItem.propTypes = {
   viewEvent2Click: PropTypes.func,
   viewEvent2Text: PropTypes.string,
   conflictOccurred: PropTypes.func,
-  eventItemTemplateResolver: PropTypes.func
+  eventItemTemplateResolver: PropTypes.func,
+  eventItemPopoverTemplateResolver: PropTypes.func
 };
 EventItem.defaultProps = {
   isDragging: undefined,
@@ -736,5 +737,6 @@ EventItem.defaultProps = {
   viewEvent2Click: undefined,
   viewEvent2Text: undefined,
   conflictOccurred: undefined,
-  eventItemTemplateResolver: undefined
+  eventItemTemplateResolver: undefined,
+  eventItemPopoverTemplateResolver: undefined
 };

package/dist/components/ResourceEvents.js

@@ -29,6 +29,7 @@ class ResourceEvents extends PureComponent {
     viewEvent2Text: PropTypes.string,
     newEvent: PropTypes.func,
     eventItemTemplateResolver: PropTypes.func,
+    eventItemPopoverTemplateResolver: PropTypes.func,
     onSelectionChange: PropTypes.func,
     isRowSelected: PropTypes.bool,
     selectionPreview: PropTypes.shape({
@@ -268,7 +269,7 @@ class ResourceEvents extends PureComponent {
       rightIndex
     } = this.state;
     this.cleanupDragInteraction();
-    if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
+    const resetSelection = () => {
       this.setState({
         startX: 0,
         leftIndex: 0,
@@ -284,17 +285,33 @@ class ResourceEvents extends PureComponent {
         left: 0,
         width: 0
       });
+    };
+    if (headers.length === 0 || !resourceEvents.headerItems || resourceEvents.headerItems.length === 0) {
+      resetSelection();
       return;
     }
+
+    // a cell width of 0 (container not measured yet) makes the drag indexes NaN or Infinity
+    const toIndex = (value, fallback) => Number.isFinite(value) ? value : fallback;
     const maxLeftIndex = headers.length - 1;
-    const safeLeftIndex = Math.max(0, Math.min(leftIndex, maxLeftIndex));
+    const safeLeftIndex = Math.max(0, Math.min(toIndex(leftIndex, 0), maxLeftIndex));
     const maxRightIndex = Math.min(headers.length, resourceEvents.headerItems.length);
-    let safeRightIndex = Math.max(1, rightIndex, safeLeftIndex + 1);
+    let safeRightIndex = Math.max(1, toIndex(rightIndex, 1), safeLeftIndex + 1);
     safeRightIndex = Math.min(safeRightIndex, maxRightIndex);
+
+    // headers and headerItems can be out of step while the view rebuilds; drop the selection instead of throwing
+    if (!headers[safeLeftIndex] || !resourceEvents.headerItems[safeRightIndex - 1]) {
+      resetSelection();
+      return;
+    }
+    const isVertical = schedulerData.isVerticalResourceView();
+    // vertical view: rows are time slots and columns are resources, so the roles swap
+    const selectedRowIds = this.getSelectedResourceIds();
     let startTime, endTime;
-    if (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 +321,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({
@@ -571,6 +588,7 @@ class ResourceEvents extends PureComponent {
               viewEvent2Click: this.props.viewEvent2Click,
               viewEvent2Text: this.props.viewEvent2Text,
               eventItemTemplateResolver: this.props.eventItemTemplateResolver,
+              eventItemPopoverTemplateResolver: this.props.eventItemPopoverTemplateResolver,
               subtitleGetter: this.props.subtitleGetter,
               updateEventStart: this.props.updateEventStart,
               updateEventEnd: this.props.updateEventEnd,

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) {
@@ -368,10 +364,11 @@ function Scheduler(props) {
     viewEvent2Text: props.viewEvent2Text,
     newEvent: props.newEvent,
     eventItemTemplateResolver: props.eventItemTemplateResolver,
+    eventItemPopoverTemplateResolver: props.eventItemPopoverTemplateResolver,
     onSelectionChange: handleSelectionChange,
     isRowSelected: selectedIdsSet.has(item.slotId),
     selectionPreview: selectionPreview
-  }, item.slotId)), [displayRenderData, schedulerData, schedulerDataVersion, eventDndSource, dndContext, props.onSetAddMoreState, props.updateEventStart, props.updateEventEnd, props.moveEvent, props.movingEvent, props.conflictOccurred, props.subtitleGetter, props.eventItemClick, props.viewEventClick, props.viewEventText, props.viewEvent2Click, props.viewEvent2Text, props.newEvent, props.eventItemTemplateResolver, handleSelectionChange, selectedIdsSet, selectionPreview]);
+  }, item.slotId)), [displayRenderData, schedulerData, schedulerDataVersion, eventDndSource, dndContext, props.onSetAddMoreState, props.updateEventStart, props.updateEventEnd, props.moveEvent, props.movingEvent, props.conflictOccurred, props.subtitleGetter, props.eventItemClick, props.viewEventClick, props.viewEventText, props.viewEvent2Click, props.viewEvent2Text, props.newEvent, props.eventItemTemplateResolver, props.eventItemPopoverTemplateResolver, handleSelectionChange, selectedIdsSet, selectionPreview]);
   let tbodyContent = /*#__PURE__*/_jsx("tr", {});
   if (showAgenda) {
     tbodyContent = /*#__PURE__*/_jsx(AgendaView, {
@@ -606,31 +603,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,
@@ -652,6 +656,7 @@ Scheduler.propTypes = {
   viewEvent2Text: PropTypes.string,
   conflictOccurred: PropTypes.func,
   eventItemTemplateResolver: PropTypes.func,
+  eventItemPopoverTemplateResolver: PropTypes.func,
   dndSources: PropTypes.array,
   slotClickedFunc: PropTypes.func,
   toggleExpandFunc: PropTypes.func,

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