fullcalendar 7.0.0-beta.0 → 7.0.0-beta.1

package/index.global.js

@@ -1,5 +1,5 @@
 /*!
-FullCalendar Standard Bundle v7.0.0-beta.0
+FullCalendar Standard Bundle v7.0.0-beta.1
 Docs & License: https://fullcalendar.io/docs/initialize-globals
 (c) 2024 Adam Shaw
 */
@@ -4286,12 +4286,12 @@ var FullCalendar = (function (exports) {
   function hasBgRendering(def) {
       return def.ui.display === 'background' || def.ui.display === 'inverse-background';
   }
-  function setElSeg(el, seg) {
-      el.fcSeg = seg;
+  function setElEventRange(el, eventRange) {
+      el.fcEventRange = eventRange;
   }
-  function getElSeg(el) {
-      return el.fcSeg ||
-          el.parentNode.fcSeg || // for the harness
+  function getElEventRange(el) {
+      return el.fcEventRange ||
+          el.parentNode.fcEventRange || // for the harness
           null;
   }
   // event ui computation
@@ -4311,7 +4311,7 @@ var FullCalendar = (function (exports) {
   }
   function sortEventSegs(segs, eventOrderSpecs) {
       let objs = segs.map(buildSegCompareObj);
-      objs.sort((obj0, obj1) => compareByFieldSpecs(obj0, obj1, eventOrderSpecs));
+      objs.sort((obj0, obj1) => compareByFieldSpecs(obj0, obj1, eventOrderSpecs)); // !!!
       return objs.map((c) => c._seg);
   }
   // returns a object with all primitive props that can be compared
@@ -4324,29 +4324,23 @@ var FullCalendar = (function (exports) {
       return Object.assign(Object.assign(Object.assign({}, eventDef.extendedProps), eventDef), { id: eventDef.publicId, start,
           end, duration: end - start, allDay: Number(eventDef.allDay), _seg: seg });
   }
-  function computeSegDraggable(seg, context) {
+  function computeEventRangeDraggable(eventRange, context) {
       let { pluginHooks } = context;
       let transformers = pluginHooks.isDraggableTransformers;
-      let { def, ui } = seg.eventRange;
+      let { def, ui } = eventRange;
       let val = ui.startEditable;
       for (let transformer of transformers) {
           val = transformer(val, def, ui, context);
       }
       return val;
   }
-  function computeSegStartResizable(seg, context) {
-      return seg.isStart && seg.eventRange.ui.durationEditable && context.options.eventResizableFromStart;
-  }
-  function computeSegEndResizable(seg, context) {
-      return seg.isEnd && seg.eventRange.ui.durationEditable;
-  }
-  function buildSegTimeText(seg, timeFormat, context, defaultDisplayEventTime, // defaults to true
+  function buildEventRangeTimeText(eventRange, timeFormat, context, defaultDisplayEventTime, // defaults to true
   defaultDisplayEventEnd, // defaults to true
   startOverride, endOverride) {
       let { dateEnv, options } = context;
       let { displayEventTime, displayEventEnd } = options;
-      let eventDef = seg.eventRange.def;
-      let eventInstance = seg.eventRange.instance;
+      let eventDef = eventRange.def;
+      let eventInstance = eventRange.instance;
       if (displayEventTime == null) {
           displayEventTime = defaultDisplayEventTime !== false;
       }
@@ -4355,8 +4349,8 @@ var FullCalendar = (function (exports) {
       }
       let wholeEventStart = eventInstance.range.start;
       let wholeEventEnd = eventInstance.range.end;
-      let segStart = startOverride || seg.start || seg.eventRange.range.start;
-      let segEnd = endOverride || seg.end || seg.eventRange.range.end;
+      let segStart = startOverride || eventRange.range.start;
+      let segEnd = endOverride || eventRange.range.end;
       let isStartDay = startOfDay(wholeEventStart).valueOf() === startOfDay(segStart).valueOf();
       let isEndDay = startOfDay(addMs(wholeEventEnd, -1)).valueOf() === startOfDay(addMs(segEnd, -1)).valueOf();
       if (displayEventTime && !eventDef.allDay && (isStartDay || isEndDay)) {
@@ -4374,8 +4368,8 @@ var FullCalendar = (function (exports) {
       }
       return '';
   }
-  function getSegMeta(seg, todayRange, nowDate) {
-      let segRange = seg.eventRange.range;
+  function getEventRangeMeta(eventRange, todayRange, nowDate) {
+      let segRange = eventRange.range;
       return {
           isPast: segRange.end <= (nowDate || todayRange.start),
           isFuture: segRange.start >= (nowDate || todayRange.end),
@@ -4425,8 +4419,8 @@ var FullCalendar = (function (exports) {
           : `${eventRange.def.defId}:${eventRange.range.start.toISOString()}`;
       // inverse-background events don't have specific instances. TODO: better solution
   }
-  function getSegAnchorAttrs(seg, context) {
-      let { def, instance } = seg.eventRange;
+  function getEventRangeAnchorAttrs(eventRange, context) {
+      let { def, instance } = eventRange;
       let { url } = def;
       if (url) {
           return { href: url };
@@ -6121,6 +6115,99 @@ var FullCalendar = (function (exports) {
       }
   }
 
+  const WHEEL_EVENT_NAMES = 'wheel mousewheel DomMouseScroll MozMousePixelScroll'.split(' ');
+  /*
+  Fires:
+  - scrollStart (always user)
+  - scroll
+  - scrollEnd (always user)
+
+  NOTE: detection is complicated (w/ touch and wheel) because ScrollerSyncer needs to know about it,
+  but are we sure we can't just ignore programmatic scrollTo() calls with a flag? and determine the
+  the scroll-master simply by who was the newest scroller? Does passive:true do things asynchronously?
+  */
+  class ScrollListener {
+      constructor(el) {
+          this.el = el;
+          this.emitter = new Emitter();
+          this.isScrolling = false;
+          this.isTouching = false; // user currently has finger down?
+          this.isRecentlyWheeled = false;
+          this.isRecentlyScrolled = false;
+          this.wheelWaiter = new DelayedRunner(this._handleWheelWaited.bind(this));
+          this.scrollWaiter = new DelayedRunner(this._handleScrollWaited.bind(this));
+          // Handlers
+          // ----------------------------------------------------------------------------------------------
+          this.handleScroll = () => {
+              this.startScroll();
+              this.emitter.trigger('scroll', this.isRecentlyWheeled, this.isTouching);
+              this.isRecentlyScrolled = true;
+              this.scrollWaiter.request(500);
+          };
+          // will fire *before* the scroll event is fired (might not cause a scroll)
+          this.handleWheel = () => {
+              this.isRecentlyWheeled = true;
+              this.wheelWaiter.request(500);
+          };
+          // will fire *before* the scroll event is fired (might not cause a scroll)
+          this.handleTouchStart = () => {
+              this.isTouching = true;
+          };
+          this.handleTouchEnd = () => {
+              this.isTouching = false;
+              // if the user ended their touch, and the scroll area wasn't moving,
+              // we consider this to be the end of the scroll.
+              if (!this.isRecentlyScrolled) {
+                  this.endScroll(); // won't fire if already ended
+              }
+          };
+          el.addEventListener('scroll', this.handleScroll);
+          el.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+          el.addEventListener('touchend', this.handleTouchEnd);
+          for (let eventName of WHEEL_EVENT_NAMES) {
+              el.addEventListener(eventName, this.handleWheel, { passive: true });
+          }
+      }
+      destroy() {
+          let { el } = this;
+          el.removeEventListener('scroll', this.handleScroll);
+          el.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
+          el.removeEventListener('touchend', this.handleTouchEnd);
+          for (let eventName of WHEEL_EVENT_NAMES) {
+              el.removeEventListener(eventName, this.handleWheel, { passive: true });
+          }
+      }
+      // Start / Stop
+      // ----------------------------------------------------------------------------------------------
+      startScroll() {
+          if (!this.isScrolling) {
+              this.isScrolling = true;
+              this.emitter.trigger('scrollStart', this.isRecentlyWheeled, this.isTouching);
+          }
+      }
+      endScroll() {
+          if (this.isScrolling) {
+              this.emitter.trigger('scrollEnd');
+              this.isScrolling = false;
+              this.isRecentlyScrolled = true;
+              this.isRecentlyWheeled = false;
+              this.scrollWaiter.clear();
+              this.wheelWaiter.clear();
+          }
+      }
+      _handleScrollWaited() {
+          this.isRecentlyScrolled = false;
+          // only end the scroll if not currently touching.
+          // if touching, the scrolling will end later, on touchend.
+          if (!this.isTouching) {
+              this.endScroll(); // won't fire if already ended
+          }
+      }
+      _handleWheelWaited() {
+          this.isRecentlyWheeled = false;
+      }
+  }
+
   class Scroller extends DateComponent {
       constructor() {
           super(...arguments);
@@ -6140,6 +6227,7 @@ var FullCalendar = (function (exports) {
       }
       componentDidMount() {
           const el = this.elRef.current; // TODO: make dynamic with useEffect
+          this.listener = new ScrollListener(el);
           this.disconnectSize = watchSize(el, (contentWidth, contentHeight) => {
               const { props, context } = this;
               const bottomScrollbarWidth = el.offsetHeight - el.clientHeight;
@@ -6170,13 +6258,20 @@ var FullCalendar = (function (exports) {
           });
       }
       componentWillUnmount() {
+          const { props } = this;
           this.disconnectSize();
+          this.listener.destroy();
+          setRef(props.widthRef, null);
+          setRef(props.heightRef, null);
+          setRef(props.bottomScrollbarWidthRef, null);
+          setRef(props.rightScrollbarWidthRef, null);
+          setRef(props.leftScrollbarWidthRef, null);
+      }
+      endScroll() {
+          this.listener.endScroll();
       }
       // Public API
       // -----------------------------------------------------------------------------------------------
-      get el() {
-          return this.elRef.current;
-      }
       get x() {
           const { isRtl } = this.context;
           const el = this.elRef.current;
@@ -6196,6 +6291,12 @@ var FullCalendar = (function (exports) {
               setNormalizedScrollX(el, isRtl, x);
           }
       }
+      addScrollEndListener(handler) {
+          this.listener.emitter.on('scrollEnd', handler);
+      }
+      removeScrollEndListener(handler) {
+          this.listener.emitter.off('scrollEnd', handler);
+      }
   }
   // Public API
   // -------------------------------------------------------------------------------------------------
@@ -6690,38 +6791,20 @@ var FullCalendar = (function (exports) {
       return { start, end };
   }
 
-  class ScrollResponder {
-      constructor(_handleScroll) {
-          this._handleScroll = _handleScroll;
-          this.handleScroll = (scroll) => {
-              this.queuedScroll = scroll;
-              this.drain();
-          };
-      }
-      drain() {
-          if (this.queuedScroll) {
-              if (this._handleScroll(this.queuedScroll)) {
-                  this.queuedScroll = undefined;
-              }
-          }
-      }
-  }
-
   class EventContainer extends BaseComponent {
       constructor() {
           super(...arguments);
           this.handleEl = (el) => {
               this.el = el;
               if (el) {
-                  setElSeg(el, this.props.seg);
+                  setElEventRange(el, this.props.eventRange);
               }
           };
       }
       render() {
           const { props, context } = this;
           const { options } = context;
-          const { seg } = props;
-          const { eventRange } = seg;
+          const { eventRange } = props;
           const { ui } = eventRange;
           const renderProps = {
               event: new EventImpl(context, eventRange.def, eventRange.instance),
@@ -6730,12 +6813,12 @@ var FullCalendar = (function (exports) {
               textColor: ui.textColor,
               backgroundColor: ui.backgroundColor,
               borderColor: ui.borderColor,
-              isDraggable: !props.disableDragging && computeSegDraggable(seg, context),
-              isStartResizable: !props.disableResizing && computeSegStartResizable(seg, context),
-              isEndResizable: !props.disableResizing && computeSegEndResizable(seg),
+              isDraggable: !props.disableDragging && computeEventRangeDraggable(eventRange, context),
+              isStartResizable: !props.disableResizing && props.isStart && eventRange.ui.durationEditable && options.eventResizableFromStart,
+              isEndResizable: !props.disableResizing && props.isEnd && eventRange.ui.durationEditable,
               isMirror: Boolean(props.isDragging || props.isResizing || props.isDateSelecting),
-              isStart: Boolean(seg.isStart),
-              isEnd: Boolean(seg.isEnd),
+              isStart: Boolean(props.isStart),
+              isEnd: Boolean(props.isEnd),
               isPast: Boolean(props.isPast),
               isFuture: Boolean(props.isFuture),
               isToday: Boolean(props.isToday),
@@ -6745,13 +6828,13 @@ var FullCalendar = (function (exports) {
           };
           return (_(ContentContainer, Object.assign({}, props /* contains children */, { elRef: this.handleEl, elClasses: [
                   ...getEventClassNames(renderProps),
-                  ...seg.eventRange.ui.classNames,
+                  ...eventRange.ui.classNames,
                   ...(props.elClasses || []),
               ], renderProps: renderProps, generatorName: "eventContent", customGenerator: options.eventContent, defaultGenerator: props.defaultGenerator, classNameGenerator: options.eventClassNames, didMount: options.eventDidMount, willUnmount: options.eventWillUnmount })));
       }
       componentDidUpdate(prevProps) {
-          if (this.el && this.props.seg !== prevProps.seg) {
-              setElSeg(this.el, this.props.seg);
+          if (this.el && this.props.eventRange !== prevProps.eventRange) {
+              setElEventRange(this.el, this.props.eventRange);
           }
       }
   }
@@ -6761,14 +6844,14 @@ var FullCalendar = (function (exports) {
       render() {
           let { props, context } = this;
           let { options } = context;
-          let { seg } = props;
-          let { ui } = seg.eventRange;
+          let { eventRange } = props;
+          let { ui } = eventRange;
           let timeFormat = options.eventTimeFormat || props.defaultTimeFormat;
-          let timeText = buildSegTimeText(seg, timeFormat, context, props.defaultDisplayEventTime, props.defaultDisplayEventEnd);
+          let timeText = buildEventRangeTimeText(eventRange, timeFormat, context, props.defaultDisplayEventTime, props.defaultDisplayEventEnd, props.startOverride, props.endOverride);
           return (_(EventContainer, Object.assign({}, props /* includes elRef */, { elTag: "a", elStyle: {
                   borderColor: ui.borderColor,
                   backgroundColor: ui.backgroundColor,
-              }, elAttrs: getSegAnchorAttrs(seg, context), defaultGenerator: renderInnerContent$1$1, timeText: timeText }), (InnerContent, eventContentArg) => (_(k$1, null,
+              }, elAttrs: getEventRangeAnchorAttrs(eventRange, context), defaultGenerator: renderInnerContent$1$1, timeText: timeText }), (InnerContent, eventContentArg) => (_(k$1, null,
               _(InnerContent, { elTag: "div", elClasses: ['fc-event-inner'], elStyle: { color: eventContentArg.textColor } }),
               Boolean(eventContentArg.isStartResizable) && (_("div", { className: "fc-event-resizer fc-event-resizer-start" })),
               Boolean(eventContentArg.isEndResizable) && (_("div", { className: "fc-event-resizer fc-event-resizer-end" }))))));
@@ -6794,8 +6877,8 @@ var FullCalendar = (function (exports) {
   class BgEvent extends BaseComponent {
       render() {
           let { props } = this;
-          let { seg } = props;
-          return (_(EventContainer, { elTag: "div", elClasses: ['fc-bg-event'], elStyle: { backgroundColor: seg.eventRange.ui.backgroundColor }, defaultGenerator: renderInnerContent$3, seg: seg, timeText: "", isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday, disableDragging: true, disableResizing: true }));
+          let { eventRange } = props;
+          return (_(EventContainer, { elTag: "div", elClasses: ['fc-bg-event'], elStyle: { backgroundColor: eventRange.ui.backgroundColor }, defaultGenerator: renderInnerContent$3, eventRange: eventRange, isStart: props.isStart, isEnd: props.isEnd, timeText: "", isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday, disableDragging: true, disableResizing: true }));
       }
   }
   function renderInnerContent$3(props) {
@@ -7272,7 +7355,6 @@ var FullCalendar = (function (exports) {
     PositionCache: PositionCache,
     RefMap: RefMap,
     ScrollController: ScrollController,
-    ScrollResponder: ScrollResponder,
     Scroller: Scroller,
     SegHierarchy: SegHierarchy,
     Slicer: Slicer,
@@ -7301,9 +7383,9 @@ var FullCalendar = (function (exports) {
     buildEntryKey: buildEntryKey,
     buildEventApis: buildEventApis,
     buildEventRangeKey: buildEventRangeKey,
+    buildEventRangeTimeText: buildEventRangeTimeText,
     buildIsoString: buildIsoString,
     buildNavLinkAttrs: buildNavLinkAttrs,
-    buildSegTimeText: buildSegTimeText,
     collectFromHash: collectFromHash,
     combineEventUis: combineEventUis,
     compareByFieldSpecs: compareByFieldSpecs,
@@ -7345,8 +7427,10 @@ var FullCalendar = (function (exports) {
     getDateMeta: getDateMeta,
     getDayClassNames: getDayClassNames,
     getDefaultEventEnd: getDefaultEventEnd,
-    getElSeg: getElSeg,
+    getElEventRange: getElEventRange,
     getEntrySpanEnd: getEntrySpanEnd,
+    getEventRangeAnchorAttrs: getEventRangeAnchorAttrs,
+    getEventRangeMeta: getEventRangeMeta,
     getEventTargetViaRoot: getEventTargetViaRoot,
     getIsHeightAuto: getIsHeightAuto,
     getIsRtlScrollbarOnLeft: getIsRtlScrollbarOnLeft,
@@ -7355,8 +7439,6 @@ var FullCalendar = (function (exports) {
     getRelevantEvents: getRelevantEvents,
     getScrollbarWidths: getScrollbarWidths,
     getScrollerSyncerClass: getScrollerSyncerClass,
-    getSegAnchorAttrs: getSegAnchorAttrs,
-    getSegMeta: getSegMeta,
     getSlotClassNames: getSlotClassNames,
     getStickyFooterScrollbar: getStickyFooterScrollbar,
     getStickyHeaderDates: getStickyHeaderDates,
@@ -9148,8 +9230,8 @@ var FullCalendar = (function (exports) {
           this.handleSegClick = (ev, segEl) => {
               let { component } = this;
               let { context } = component;
-              let seg = getElSeg(segEl);
-              if (seg && // might be the <div> surrounding the more link
+              let eventRange = getElEventRange(segEl);
+              if (eventRange && // might be the <div> surrounding the more link
                   component.isValidSegDownEl(ev.target)) {
                   // our way to simulate a link click for elements that can't be <a> tags
                   // grab before trigger fired in case trigger trashes DOM thru rerendering
@@ -9157,7 +9239,7 @@ var FullCalendar = (function (exports) {
                   let url = hasUrlContainer ? hasUrlContainer.querySelector('a[href]').href : '';
                   context.emitter.trigger('eventClick', {
                       el: segEl,
-                      event: new EventImpl(component.context, seg.eventRange.def, seg.eventRange.instance),
+                      event: new EventImpl(component.context, eventRange.def, eventRange.instance),
                       jsEvent: ev,
                       view: context.viewApi,
                   });
@@ -9185,7 +9267,7 @@ var FullCalendar = (function (exports) {
               }
           };
           this.handleSegEnter = (ev, segEl) => {
-              if (getElSeg(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
+              if (getElEventRange(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
                   this.currentSegEl = segEl;
                   this.triggerEvent('eventMouseEnter', ev, segEl);
               }
@@ -9205,11 +9287,11 @@ var FullCalendar = (function (exports) {
       triggerEvent(publicEvName, ev, segEl) {
           let { component } = this;
           let { context } = component;
-          let seg = getElSeg(segEl);
+          let eventRange = getElEventRange(segEl);
           if (!ev || component.isValidSegDownEl(ev.target)) {
               context.emitter.trigger(publicEvName, {
                   el: segEl,
-                  event: new EventImpl(context, seg.eventRange.def, seg.eventRange.instance),
+                  event: new EventImpl(context, eventRange.def, eventRange.instance),
                   jsEvent: ev,
                   view: context.viewApi,
               });
@@ -9517,7 +9599,7 @@ var FullCalendar = (function (exports) {
       return sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
   }
 
-  const version = '7.0.0-beta.0';
+  const version = '7.0.0-beta.1';
 
   config.touchMouseIgnoreWait = 500;
   let ignoreMouseDepth = 0;
@@ -10746,7 +10828,6 @@ var FullCalendar = (function (exports) {
           super(settings);
           // internal state
           this.subjectEl = null;
-          this.subjectSeg = null; // the seg being selected/dragged
           this.isDragging = false;
           this.eventRange = null;
           this.relevantEvents = null; // the events being dragged
@@ -10760,8 +10841,7 @@ var FullCalendar = (function (exports) {
               let { options } = component.context;
               let initialContext = component.context;
               this.subjectEl = ev.subjectEl;
-              let subjectSeg = this.subjectSeg = getElSeg(ev.subjectEl);
-              let eventRange = this.eventRange = subjectSeg.eventRange;
+              let eventRange = this.eventRange = getElEventRange(ev.subjectEl);
               let eventInstanceId = eventRange.instance.instanceId;
               this.relevantEvents = getRelevantEvents(initialContext.getCurrentData().eventStore, eventInstanceId);
               dragging.minDistance = ev.isTouch ? 0 : options.eventDragMinDistance;
@@ -11026,7 +11106,6 @@ var FullCalendar = (function (exports) {
           }
       }
       cleanup() {
-          this.subjectSeg = null;
           this.isDragging = false;
           this.eventRange = null;
           this.relevantEvents = null;
@@ -11087,7 +11166,7 @@ var FullCalendar = (function (exports) {
           super(settings);
           // internal state
           this.draggingSegEl = null;
-          this.draggingSeg = null; // TODO: rename to resizingSeg? subjectSeg?
+          this.draggingEventRange = null; // TODO: rename to resizingSeg? subjectSeg?
           this.eventRange = null;
           this.relevantEvents = null;
           this.validMutation = null;
@@ -11095,8 +11174,7 @@ var FullCalendar = (function (exports) {
           this.handlePointerDown = (ev) => {
               let { component } = this;
               let segEl = this.querySegEl(ev);
-              let seg = getElSeg(segEl);
-              let eventRange = this.eventRange = seg.eventRange;
+              let eventRange = this.eventRange = getElEventRange(segEl);
               this.dragging.minDistance = component.context.options.eventDragMinDistance;
               // if touch, need to be working with a selected event
               this.dragging.setIgnoreMove(!this.component.isValidSegDownEl(ev.origEvent.target) ||
@@ -11108,7 +11186,7 @@ var FullCalendar = (function (exports) {
               this.relevantEvents = getRelevantEvents(context.getCurrentData().eventStore, this.eventRange.instance.instanceId);
               let segEl = this.querySegEl(ev);
               this.draggingSegEl = segEl;
-              this.draggingSeg = getElSeg(segEl);
+              this.draggingEventRange = getElEventRange(segEl);
               context.calendarApi.unselect();
               context.emitter.trigger('eventResizeStart', {
                   el: segEl,
@@ -11208,7 +11286,7 @@ var FullCalendar = (function (exports) {
                   context.emitter.trigger('_noEventResize');
               }
               // reset all internal state
-              this.draggingSeg = null;
+              this.draggingEventRange = null;
               this.relevantEvents = null;
               this.validMutation = null;
               // okay to keep eventInstance around. useful to set it in handlePointerDown
@@ -11718,7 +11796,7 @@ var FullCalendar = (function (exports) {
   }
   // Positioning
   // -------------------------------------------------------------------------------------------------
-  function computeTopFromDate(date, cellRows, rowHeightMap) {
+  function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
       let top = 0;
       for (const cells of cellRows) {
           const start = cells[0].date;
@@ -11731,7 +11809,7 @@ var FullCalendar = (function (exports) {
           if (rowHeight == null) {
               return; // denote unknown
           }
-          top += rowHeight;
+          top += rowHeight + adjust;
       }
       return top;
   }
@@ -11837,6 +11915,7 @@ var FullCalendar = (function (exports) {
       }
       componentWillUnmount() {
           this.disconectInnerHeight();
+          setRef(this.props.innerHeightRef, null);
       }
   }
 
@@ -11906,7 +11985,7 @@ var FullCalendar = (function (exports) {
   class DayGridBlockEvent extends BaseComponent {
       render() {
           let { props } = this;
-          return (_(StandardEvent, Object.assign({}, props, { elClasses: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.seg.eventRange.def.allDay })));
+          return (_(StandardEvent, Object.assign({}, props, { elClasses: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.eventRange.def.allDay })));
       }
   }
 
@@ -11914,10 +11993,10 @@ var FullCalendar = (function (exports) {
       render() {
           let { props, context } = this;
           let { options } = context;
-          let { seg } = props;
+          let { eventRange } = props;
           let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
-          let timeText = buildSegTimeText(seg, timeFormat, context, true, props.defaultDisplayEventEnd);
-          return (_(EventContainer, Object.assign({}, props, { elTag: "a", elClasses: ['fc-daygrid-event', 'fc-daygrid-dot-event'], elAttrs: getSegAnchorAttrs(props.seg, context), defaultGenerator: renderInnerContent$2, timeText: timeText, isResizing: false, isDateSelecting: false })));
+          let timeText = buildEventRangeTimeText(eventRange, timeFormat, context, true, props.defaultDisplayEventEnd);
+          return (_(EventContainer, Object.assign({}, props, { elTag: "a", elClasses: ['fc-daygrid-event', 'fc-daygrid-dot-event'], elAttrs: getEventRangeAnchorAttrs(eventRange, context), defaultGenerator: renderInnerContent$2, timeText: timeText, isResizing: false, isDateSelecting: false })));
       }
   }
   function renderInnerContent$2(renderProps) {
@@ -11936,10 +12015,11 @@ var FullCalendar = (function (exports) {
                       (props.eventResize ? props.eventResize.affectedInstances : null) ||
                       {};
                   return (_(k$1, null, props.segs.map((seg) => {
-                      let instanceId = seg.eventRange.instance.instanceId;
+                      let { eventRange } = seg;
+                      let instanceId = eventRange.instance.instanceId;
                       return (_("div", { key: instanceId, style: {
                               visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
-                          } }, hasListItemDisplay(seg) ? (_(DayGridListEvent, Object.assign({ seg: seg, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange)))) : (_(DayGridBlockEvent, Object.assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange))))));
+                          } }, hasListItemDisplay(seg) ? (_(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange)))) : (_(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange))))));
                   })));
               } }));
       }
@@ -12158,6 +12238,7 @@ var FullCalendar = (function (exports) {
       }
       componentWillUnmount() {
           this.detachHeight();
+          setRef(this.props.heightRef, null);
       }
   }
 
@@ -12280,7 +12361,8 @@ var FullCalendar = (function (exports) {
           for (const seg of segs) {
               const { left, right, width } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
               // TODO: optimize ID creation? all related
-              const { instanceId } = seg.eventRange.instance;
+              const { eventRange } = seg;
+              const { instanceId } = eventRange.instance;
               const segSpanId = getSegSpanId(seg);
               const segStartId = getSegStartId(seg);
               const top = segTops[segStartId];
@@ -12300,7 +12382,7 @@ var FullCalendar = (function (exports) {
                       width,
                   }, heightRef: (isMirror || seg.isStandin)
                       ? null
-                      : segHeightRefMap.createRef(segSpanId) }, hasListItemDisplay(seg) ? (_(DayGridListEvent, Object.assign({ seg: seg, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange)))) : (_(DayGridBlockEvent, Object.assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange))))));
+                      : segHeightRefMap.createRef(segSpanId) }, hasListItemDisplay(seg) ? (_(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange)))) : (_(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange))))));
           }
           return nodes;
       }
@@ -12319,8 +12401,7 @@ var FullCalendar = (function (exports) {
                       right,
                       width,
                   } }, fillType === 'bg-event' ?
-                  _(BgEvent, Object.assign({ seg: seg }, getSegMeta(seg, todayRange))) :
-                  renderFill(fillType)));
+                  _(BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, getEventRangeMeta(seg.eventRange, todayRange))) : (renderFill(fillType))));
           }
           return _(k$1, {}, ...nodes);
       }
@@ -12418,12 +12499,12 @@ var FullCalendar = (function (exports) {
               heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
       }
       componentDidMount() {
-          this.unwatchWidth = watchWidth(this.rootEl, (width) => {
+          this.detachWidth = watchWidth(this.rootEl, (width) => {
               this.setState({ width });
           });
       }
       componentWillUnmount() {
-          this.unwatchWidth();
+          this.detachWidth();
       }
       // Hit System
       // -----------------------------------------------------------------------------------------------
@@ -12601,12 +12682,11 @@ var FullCalendar = (function (exports) {
       // Scrolling
       // -----------------------------------------------------------------------------------------------
       updateSyncedScroller() {
-          const { isRtl } = this.context;
           this.syncedScroller.handleChildren([
               this.headerScrollerRef.current,
               this.bodyScrollerRef.current,
               this.footerScrollerRef.current,
-          ], isRtl);
+          ]);
       }
   }
 
@@ -12615,20 +12695,29 @@ var FullCalendar = (function (exports) {
           super(...arguments);
           // ref
           this.scrollerRef = m$1();
-          this.rowHeightRefMap = new RefMap();
-          // Scrolling
-          // -----------------------------------------------------------------------------------------------
-          this.timeScrollResponder = new ScrollResponder((_time) => {
-              // HACK to scroll to day
+          this.rowHeightRefMap = new RefMap(() => {
+              afterSize(this.updateScrollY);
+          });
+          // internal
+          this.scrollDate = null;
+          this.updateScrollY = () => {
               const rowHeightMap = this.rowHeightRefMap.current;
               const scroller = this.scrollerRef.current;
-              const scrollTop = computeTopFromDate(this.props.dateProfile.currentDate, this.props.cellRows, rowHeightMap);
-              if (scrollTop != null) {
-                  scroller.scrollTo({ y: scrollTop });
-                  return true;
+              // Since updateScrollY is called by rowHeightRefMap, could be called with null during cleanup,
+              // and the scroller might not exist
+              if (scroller && this.scrollDate) {
+                  let scrollTop = computeTopFromDate(this.scrollDate, this.props.cellRows, rowHeightMap, 1);
+                  if (scrollTop != null) {
+                      if (scrollTop) {
+                          scrollTop++; // clear top border
+                      }
+                      scroller.scrollTo({ y: scrollTop });
+                  }
               }
-              return false;
-          });
+          };
+          this.clearScroll = () => {
+              this.scrollDate = null;
+          };
       }
       render() {
           const { props, context } = this;
@@ -12639,22 +12728,25 @@ var FullCalendar = (function (exports) {
       // Lifecycle
       // -----------------------------------------------------------------------------------------------
       componentDidMount() {
-          const { context } = this;
-          const { options } = context;
-          context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
-          this.timeScrollResponder.handleScroll(options.scrollTime);
+          this.resetScroll();
+          this.scrollerRef.current.addScrollEndListener(this.clearScroll);
       }
       componentDidUpdate(prevProps) {
-          const { options } = this.context;
-          if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
-              this.timeScrollResponder.handleScroll(options.scrollTime);
-          }
-          else {
-              this.timeScrollResponder.drain();
+          if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+              this.resetScroll();
           }
       }
       componentWillUnmount() {
-          this.context.emitter.off('_timeScrollRequest', this.timeScrollResponder.handleScroll);
+          this.scrollerRef.current.removeScrollEndListener(this.clearScroll);
+      }
+      // Scrolling
+      // -----------------------------------------------------------------------------------------------
+      resetScroll() {
+          this.scrollDate = this.props.dateProfile.currentDate;
+          this.updateScrollY();
+          // updateScrollX
+          const scroller = this.scrollerRef.current;
+          scroller.scrollTo({ x: 0 });
       }
   }
 
@@ -12711,6 +12803,7 @@ var FullCalendar = (function (exports) {
       }
       componentWillUnmount() {
           this.disconectInnerHeight();
+          setRef(this.props.innerHeightRef, null);
       }
   }
 
@@ -12829,6 +12922,141 @@ var FullCalendar = (function (exports) {
       },
   });
 
+  var css_248z$2 = ".fc-v-event{background-color:var(--fc-event-bg-color);border:1px solid var(--fc-event-border-color);display:flex;flex-direction:column;position:relative}.fc-v-event:not(.fc-event-start){border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.fc-v-event:not(.fc-event-end){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0}.fc-v-event.fc-event-selected:before{left:-10px;right:-10px}.fc-v-event .fc-event-inner{color:var(--fc-event-text-color);display:flex;flex-direction:column;flex-grow:1;min-width:0}.fc-v-event .fc-event-time{white-space:nowrap}.fc-v-event .fc-event-time,.fc-v-event .fc-event-title{overflow:hidden}.fc-v-event .fc-event-title-outer{display:flex;flex-direction:column;flex-grow:1;min-width:0}.fc-v-event .fc-event-title{bottom:0;position:sticky;top:0}.fc-v-event .fc-event-resizer-start{cursor:n-resize}.fc-v-event .fc-event-resizer-end{cursor:s-resize}.fc-v-event:not(.fc-event-selected) .fc-event-resizer{height:var(--fc-event-resizer-thickness);left:0;right:0}.fc-v-event:not(.fc-event-selected) .fc-event-resizer-start{top:calc(var(--fc-event-resizer-thickness)/-2)}.fc-v-event:not(.fc-event-selected) .fc-event-resizer-end{bottom:calc(var(--fc-event-resizer-thickness)/-2)}.fc-v-event.fc-event-selected .fc-event-resizer{left:50%;margin-left:calc(var(--fc-event-resizer-dot-total-width)/-2)}.fc-v-event.fc-event-selected .fc-event-resizer-start{top:calc(var(--fc-event-resizer-dot-total-width)/-2)}.fc-v-event.fc-event-selected .fc-event-resizer-end{bottom:calc(var(--fc-event-resizer-dot-total-width)/-2)}.fc-timegrid-axis{align-items:flex-end}.fc-timegrid-axis,.fc-timegrid-axis-inner{display:flex;flex-direction:column;justify-content:center}.fc-timegrid-axis-inner{min-height:1.5em}.fc-timegrid-slot-minor{border-style:dotted}.fc-timegrid-col{position:relative}.fc-timegrid-col.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-timegrid-bg-harness .fc-non-business{z-index:1}.fc-timegrid-bg-harness .fc-bg-event{z-index:2}.fc-timegrid-bg-harness .fc-highlight,.fc-timegrid-col-fg{z-index:3}.fc-direction-ltr .fc-timegrid-col-fg{margin:0 2.5% 0 2px}.fc-direction-rtl .fc-timegrid-col-fg{margin:0 2px 0 2.5%}.fc-timegrid-event{border-radius:3px;bottom:0;font-size:var(--fc-small-font-size);left:0;margin-bottom:1px;position:absolute;right:0;top:0;z-index:3}.fc-timegrid-event-inset,.fc-timegrid-event.fc-event-mirror{box-shadow:0 0 0 1px var(--fc-page-bg-color)}.fc-timegrid-harness-plain>.fc-timegrid-event{position:static}.fc-timegrid-event .fc-event-inner{padding:1px 1px 0}.fc-timegrid-event-short .fc-event-inner{flex-direction:row;overflow:hidden}.fc-timegrid-event .fc-event-time{font-size:var(--fc-small-font-size);margin-bottom:1px;white-space:nowrap}.fc-timegrid-event-short .fc-event-time:after{content:\"\\00a0-\\00a0\"}.fc-timegrid-event-short .fc-event-title,.fc-timegrid-more-link{font-size:var(--fc-small-font-size)}.fc-timegrid-more-link{background:var(--fc-more-link-bg-color);border-radius:3px;box-shadow:0 0 0 1px var(--fc-page-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;margin-bottom:1px;z-index:9999}.fc-direction-ltr .fc-timegrid-more-link{right:0}.fc-direction-rtl .fc-timegrid-more-link{left:0}.fc-timegrid-more-link-inner{padding:3px 2px}.fc-timegrid-now-indicator-container{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.fc-timegrid-now-indicator-arrow,.fc-timegrid-now-indicator-line{pointer-events:none}.fc-timegrid-now-indicator-line{border-width:1px 0 0;left:0;right:0}.fc-timegrid-now-indicator-arrow,.fc-timegrid-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;position:absolute;z-index:4}.fc-timegrid-now-indicator-arrow{margin-top:-5px}.fc-direction-ltr .fc-timegrid-now-indicator-arrow{border-bottom-color:transparent;border-top-color:transparent;border-width:5px 0 5px 6px;left:0}.fc-direction-rtl .fc-timegrid-now-indicator-arrow{border-bottom-color:transparent;border-top-color:transparent;border-width:5px 6px 5px 0;right:0}";
+  injectStyles(css_248z$2);
+
+  /*
+  TODO: more DRY with daygrid?
+  can be given null/undefined!
+  */
+  function splitSegsByCol(segs, colCnt) {
+      let segsByCol = [];
+      let i;
+      for (i = 0; i < colCnt; i += 1) {
+          segsByCol.push([]);
+      }
+      if (segs) {
+          for (i = 0; i < segs.length; i += 1) {
+              segsByCol[segs[i].col].push(segs[i]);
+          }
+      }
+      return segsByCol;
+  }
+  /*
+  TODO: more DRY with daygrid?
+  can be given null/undefined!
+  */
+  function splitInteractionByCol(ui, colCnt) {
+      let byRow = [];
+      if (!ui) {
+          for (let i = 0; i < colCnt; i += 1) {
+              byRow[i] = null;
+          }
+      }
+      else {
+          for (let i = 0; i < colCnt; i += 1) {
+              byRow[i] = {
+                  affectedInstances: ui.affectedInstances,
+                  isEvent: ui.isEvent,
+                  segs: [],
+              };
+          }
+          for (let seg of ui.segs) {
+              byRow[seg.col].segs.push(seg);
+          }
+      }
+      return byRow;
+  }
+
+  class DayTimeColsSlicer extends Slicer {
+      sliceRange(range, dayRanges) {
+          let segs = [];
+          for (let col = 0; col < dayRanges.length; col += 1) {
+              let segRange = intersectRanges(range, dayRanges[col]);
+              if (segRange) {
+                  segs.push({
+                      start: segRange.start,
+                      end: segRange.end,
+                      isStart: segRange.start.valueOf() === range.start.valueOf(),
+                      isEnd: segRange.end.valueOf() === range.end.valueOf(),
+                      col,
+                  });
+              }
+          }
+          return segs;
+      }
+  }
+
+  // potential nice values for the slot-duration and interval-duration
+  // from largest to smallest
+  const STOCK_SUB_DURATIONS = [
+      { hours: 1 },
+      { minutes: 30 },
+      { minutes: 15 },
+      { seconds: 30 },
+      { seconds: 15 },
+  ];
+  function buildSlatMetas(slotMinTime, slotMaxTime, explicitLabelInterval, slotDuration, dateEnv) {
+      let dayStart = new Date(0);
+      let slatTime = slotMinTime;
+      let slatIterator = createDuration(0);
+      let labelInterval = explicitLabelInterval || computeLabelInterval(slotDuration);
+      let metas = [];
+      while (asRoughMs(slatTime) < asRoughMs(slotMaxTime)) {
+          let date = dateEnv.add(dayStart, slatTime);
+          let isLabeled = wholeDivideDurations(slatIterator, labelInterval) !== null;
+          metas.push({
+              date,
+              time: slatTime,
+              key: date.toISOString(),
+              isoTimeStr: formatIsoTimeString(date),
+              isLabeled,
+          });
+          slatTime = addDurations(slatTime, slotDuration);
+          slatIterator = addDurations(slatIterator, slotDuration);
+      }
+      return metas;
+  }
+  // Computes an automatic value for slotLabelInterval
+  function computeLabelInterval(slotDuration) {
+      let i;
+      let labelInterval;
+      let slotsPerLabel;
+      // find the smallest stock label interval that results in more than one slots-per-label
+      for (i = STOCK_SUB_DURATIONS.length - 1; i >= 0; i -= 1) {
+          labelInterval = createDuration(STOCK_SUB_DURATIONS[i]);
+          slotsPerLabel = wholeDivideDurations(labelInterval, slotDuration);
+          if (slotsPerLabel !== null && slotsPerLabel > 1) {
+              return labelInterval;
+          }
+      }
+      return slotDuration; // fall back
+  }
+
+  class AllDaySplitter extends Splitter {
+      getKeyInfo() {
+          return {
+              allDay: {},
+              timed: {},
+          };
+      }
+      getKeysForDateSpan(dateSpan) {
+          if (dateSpan.allDay) {
+              return ['allDay'];
+          }
+          return ['timed'];
+      }
+      getKeysForEventDef(eventDef) {
+          if (!eventDef.allDay) {
+              return ['timed'];
+          }
+          if (hasBgRendering(eventDef)) {
+              return ['timed', 'allDay'];
+          }
+          return ['allDay'];
+      }
+  }
+
   function buildTimeColsModel(dateProfile, dateProfileGenerator) {
       let daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
       return new DayTableModel(daySeries, false);
@@ -12886,92 +13114,6 @@ var FullCalendar = (function (exports) {
       ].join(' ');
   }
 
-  class AllDaySplitter extends Splitter {
-      getKeyInfo() {
-          return {
-              allDay: {},
-              timed: {},
-          };
-      }
-      getKeysForDateSpan(dateSpan) {
-          if (dateSpan.allDay) {
-              return ['allDay'];
-          }
-          return ['timed'];
-      }
-      getKeysForEventDef(eventDef) {
-          if (!eventDef.allDay) {
-              return ['timed'];
-          }
-          if (hasBgRendering(eventDef)) {
-              return ['timed', 'allDay'];
-          }
-          return ['allDay'];
-      }
-  }
-
-  class DayTimeColsSlicer extends Slicer {
-      sliceRange(range, dayRanges) {
-          let segs = [];
-          for (let col = 0; col < dayRanges.length; col += 1) {
-              let segRange = intersectRanges(range, dayRanges[col]);
-              if (segRange) {
-                  segs.push({
-                      start: segRange.start,
-                      end: segRange.end,
-                      isStart: segRange.start.valueOf() === range.start.valueOf(),
-                      isEnd: segRange.end.valueOf() === range.end.valueOf(),
-                      col,
-                  });
-              }
-          }
-          return segs;
-      }
-  }
-
-  /*
-  TODO: more DRY with daygrid?
-  can be given null/undefined!
-  */
-  function splitSegsByCol(segs, colCnt) {
-      let segsByCol = [];
-      let i;
-      for (i = 0; i < colCnt; i += 1) {
-          segsByCol.push([]);
-      }
-      if (segs) {
-          for (i = 0; i < segs.length; i += 1) {
-              segsByCol[segs[i].col].push(segs[i]);
-          }
-      }
-      return segsByCol;
-  }
-  /*
-  TODO: more DRY with daygrid?
-  can be given null/undefined!
-  */
-  function splitInteractionByCol(ui, colCnt) {
-      let byRow = [];
-      if (!ui) {
-          for (let i = 0; i < colCnt; i += 1) {
-              byRow[i] = null;
-          }
-      }
-      else {
-          for (let i = 0; i < colCnt; i += 1) {
-              byRow[i] = {
-                  affectedInstances: ui.affectedInstances,
-                  isEvent: ui.isEvent,
-                  segs: [],
-              };
-          }
-          for (let seg of ui.segs) {
-              byRow[seg.col].segs.push(seg);
-          }
-      }
-      return byRow;
-  }
-
   const DEFAULT_WEEK_NUM_FORMAT = createFormatter({ week: 'short' });
   class TimeGridWeekNumber extends BaseComponent {
       constructor() {
@@ -13002,65 +13144,23 @@ var FullCalendar = (function (exports) {
                   ], elAttrs: navLinkAttrs })))));
       }
       componentDidMount() {
+          const { props } = this;
           const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
           // TODO: only attach this if refs props present
           // TODO: handle width/height independently?
           this.detachInnerSize = watchSize(innerEl, (width, height) => {
-              setRef(this.props.innerWidthRef, width);
-              setRef(this.props.innerHeightRef, height);
+              setRef(props.innerWidthRef, width);
+              setRef(props.innerHeightRef, height);
           });
       }
       componentWillUnmount() {
+          const { props } = this;
           this.detachInnerSize();
+          setRef(props.innerWidthRef, null);
+          setRef(props.innerHeightRef, null);
       }
   }
 
-  // potential nice values for the slot-duration and interval-duration
-  // from largest to smallest
-  const STOCK_SUB_DURATIONS = [
-      { hours: 1 },
-      { minutes: 30 },
-      { minutes: 15 },
-      { seconds: 30 },
-      { seconds: 15 },
-  ];
-  function buildSlatMetas(slotMinTime, slotMaxTime, explicitLabelInterval, slotDuration, dateEnv) {
-      let dayStart = new Date(0);
-      let slatTime = slotMinTime;
-      let slatIterator = createDuration(0);
-      let labelInterval = explicitLabelInterval || computeLabelInterval(slotDuration);
-      let metas = [];
-      while (asRoughMs(slatTime) < asRoughMs(slotMaxTime)) {
-          let date = dateEnv.add(dayStart, slatTime);
-          let isLabeled = wholeDivideDurations(slatIterator, labelInterval) !== null;
-          metas.push({
-              date,
-              time: slatTime,
-              key: date.toISOString(),
-              isoTimeStr: formatIsoTimeString(date),
-              isLabeled,
-          });
-          slatTime = addDurations(slatTime, slotDuration);
-          slatIterator = addDurations(slatIterator, slotDuration);
-      }
-      return metas;
-  }
-  // Computes an automatic value for slotLabelInterval
-  function computeLabelInterval(slotDuration) {
-      let i;
-      let labelInterval;
-      let slotsPerLabel;
-      // find the smallest stock label interval that results in more than one slots-per-label
-      for (i = STOCK_SUB_DURATIONS.length - 1; i >= 0; i -= 1) {
-          labelInterval = createDuration(STOCK_SUB_DURATIONS[i]);
-          slotsPerLabel = wholeDivideDurations(labelInterval, slotDuration);
-          if (slotsPerLabel !== null && slotsPerLabel > 1) {
-              return labelInterval;
-          }
-      }
-      return slotDuration; // fall back
-  }
-
   class TimeGridAllDayLabel extends BaseComponent {
       constructor() {
           super(...arguments);
@@ -13089,15 +13189,19 @@ var FullCalendar = (function (exports) {
                   ] })))));
       }
       componentDidMount() {
+          const { props } = this;
           const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
           // TODO: only attach this if refs props present
           this.disconnectInnerSize = watchSize(innerEl, (width, height) => {
-              setRef(this.props.innerWidthRef, width);
-              setRef(this.props.innerHeightRef, height);
+              setRef(props.innerWidthRef, width);
+              setRef(props.innerHeightRef, height);
           });
       }
       componentWillUnmount() {
+          const { props } = this;
           this.disconnectInnerSize();
+          setRef(props.innerWidthRef, null);
+          setRef(props.innerHeightRef, null);
       }
   }
   function renderAllDayInner$1(renderProps) {
@@ -13205,19 +13309,23 @@ var FullCalendar = (function (exports) {
                   ] })))));
       }
       componentDidMount() {
+          const { props } = this;
           const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
           if (innerEl) { // could be null if !isLabeled
               // TODO: only attach this if refs props present
               // TODO: fire width/height independently?
               this.detachInnerSize = watchSize(innerEl, (width, height) => {
-                  setRef(this.props.innerWidthRef, width);
-                  setRef(this.props.innerHeightRef, height);
+                  setRef(props.innerWidthRef, width);
+                  setRef(props.innerHeightRef, height);
               });
           }
       }
       componentWillUnmount() {
+          const { props } = this;
           if (this.detachInnerSize) {
               this.detachInnerSize();
+              setRef(props.innerWidthRef, null);
+              setRef(props.innerHeightRef, null);
           }
       }
   }
@@ -13257,6 +13365,7 @@ var FullCalendar = (function (exports) {
       }
       componentWillUnmount() {
           this.detachInnerHeight();
+          setRef(this.props.innerHeightRef, null);
       }
   }
 
@@ -13455,7 +13564,7 @@ var FullCalendar = (function (exports) {
                   'fc-v-event',
                   props.isShort ? 'fc-timegrid-event-short' : '',
                   props.isInset ? 'fc-timegrid-event-inset' : '',
-              ], defaultTimeFormat: DEFAULT_TIME_FORMAT$1 })));
+              ], defaultTimeFormat: DEFAULT_TIME_FORMAT$1, startOverride: props.segStart, endOverride: props.segEnd })));
       }
   }
 
@@ -13538,7 +13647,8 @@ var FullCalendar = (function (exports) {
           return (_(k$1, null,
               this.renderHiddenGroups(hiddenGroups, segs),
               segs.map((seg, index) => {
-                  let instanceId = seg.eventRange.instance.instanceId; // guaranteed because it's an fg event
+                  let { eventRange } = seg;
+                  let instanceId = eventRange.instance.instanceId; // guaranteed because it's an fg event
                   let segVertical = segVerticals[index];
                   let setRect = segRects[index]; // for horizontals. could be undefined!? HACK
                   let hStyle = (!isMirror && setRect)
@@ -13547,7 +13657,7 @@ var FullCalendar = (function (exports) {
                   let isVisible = isMirror || (setRect && !segIsInvisible[instanceId]);
                   let isInset = setRect && setRect.stackForward > 0;
                   return (_("div", { className: 'fc-abs', key: forcedKey || instanceId, style: Object.assign({ visibility: isVisible ? '' : 'hidden', top: fracToCssDim(segVertical.start), height: fracToCssDim(segVertical.size) }, hStyle) },
-                      _(TimeGridEvent, Object.assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, isShort: segVertical.isShort, isInset: isInset }, getSegMeta(seg, todayRange, nowDate)))));
+                      _(TimeGridEvent, Object.assign({ eventRange: eventRange, segStart: seg.start, segEnd: seg.end, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, isShort: segVertical.isShort, isInset: isInset }, getEventRangeMeta(eventRange, todayRange, nowDate)))));
               })));
       }
       /*
@@ -13566,12 +13676,13 @@ var FullCalendar = (function (exports) {
           let { props, context } = this;
           let segVerticals = computeFgSegVerticals(segs, props.dateProfile, props.date, props.slatCnt, props.slatHeight, context.options.eventMinHeight);
           return (_(k$1, null, segs.map((seg, index) => {
+              const { eventRange } = seg;
               const segVertical = segVerticals[index];
-              return (_("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-timegrid-bg-harness fc-fill-x", style: {
+              return (_("div", { key: buildEventRangeKey(eventRange), className: "fc-timegrid-bg-harness fc-fill-x", style: {
                       top: fracToCssDim(segVertical.start),
                       height: fracToCssDim(segVertical.size),
                   } }, fillType === 'bg-event' ?
-                  _(BgEvent, Object.assign({ seg: seg }, getSegMeta(seg, props.todayRange, props.nowDate))) :
+                  _(BgEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, getEventRangeMeta(eventRange, props.todayRange, props.nowDate))) :
                   renderFill(fillType)));
           })));
       }
@@ -13619,9 +13730,10 @@ var FullCalendar = (function (exports) {
           (eventResize ? eventResize.affectedInstances : null) ||
           {};
       return (_(k$1, null, sortedFgSegs.map((seg) => {
-          let instanceId = seg.eventRange.instance.instanceId;
+          let { eventRange } = seg;
+          let instanceId = eventRange.instance.instanceId;
           return (_("div", { key: instanceId, className: 'fc-timegrid-harness-plain', style: { visibility: hiddenInstances[instanceId] ? 'hidden' : '' } },
-              _(TimeGridEvent, Object.assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === eventSelection, isShort: false, isInset: false }, getSegMeta(seg, todayRange, nowDate)))));
+              _(TimeGridEvent, Object.assign({ eventRange: eventRange, segStart: seg.start, segEnd: seg.end, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === eventSelection, isShort: false, isInset: false }, getEventRangeMeta(eventRange, todayRange, nowDate)))));
       })));
   }
 
@@ -13945,17 +14057,16 @@ var FullCalendar = (function (exports) {
           this.updateScrollers();
       }
       updateScrollers() {
-          const { isRtl } = this.context;
           this.dayScroller.handleChildren([
               this.headerScrollerRef.current,
               this.allDayScrollerRef.current,
               this.mainScrollerRef.current,
               this.footScrollerRef.current,
-          ], isRtl);
+          ]);
           this.timeScroller.handleChildren([
               this.axisScrollerRef.current,
               this.mainScrollerRef.current,
-          ], isRtl);
+          ]);
       }
       destroyScrollers() {
           setRef(this.props.dayScrollerRef, null);
@@ -14109,35 +14220,35 @@ var FullCalendar = (function (exports) {
           // refs
           this.dayScrollerRef = m$1();
           this.timeScrollerRef = m$1();
-          // Scrolling
+          this.scrollTime = null;
+          // Sizing
           // -----------------------------------------------------------------------------------------------
           this.handleSlatHeight = (slatHeight) => {
               this.slatHeight = slatHeight;
-              afterSize(this.handleSize);
+              afterSize(this.updateScroll);
           };
-          this.handleSize = () => {
-              this.timeScrollResponder.drain();
+          this.handleTimeScroll = (scrollTime) => {
+              this.scrollTime = scrollTime;
+              this.updateScroll();
           };
-          this.timeScrollResponder = new ScrollResponder((time) => {
-              const dayScroller = this.dayScrollerRef.current;
+          this.updateScroll = () => {
               const timeScroller = this.timeScrollerRef.current;
-              const { slatHeight } = this;
-              if (slatHeight != null) {
-                  let top = computeTimeTopFrac(time, this.props.dateProfile)
+              const { scrollTime, slatHeight } = this;
+              // Since updateScroll is called by handleSlatHeight, could be called with null during cleanup,
+              // and the timeScroller might not exist
+              if (timeScroller && scrollTime && slatHeight != null) {
+                  let top = computeTimeTopFrac(scrollTime, this.props.dateProfile)
                       * (slatHeight * this.currentSlatCnt)
                       + (this.context.isRtl ? -1 : 1); // overcome border
                   if (top) {
                       top++; // overcome top border
                   }
                   timeScroller.scrollTo({ y: top });
-                  // HACK to scroll to day
-                  if (dayScroller) {
-                      dayScroller.scrollTo({ x: 0 });
-                  }
-                  return true;
               }
-              return false;
-          });
+          };
+          this.clearScroll = () => {
+              this.scrollTime = null;
+          };
       }
       render() {
           const { props, context } = this;
@@ -14166,22 +14277,27 @@ var FullCalendar = (function (exports) {
       // Lifecycle
       // -----------------------------------------------------------------------------------------------
       componentDidMount() {
-          const { context } = this;
-          const { options } = context;
-          context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
-          this.timeScrollResponder.handleScroll(options.scrollTime);
+          this.resetScroll();
+          this.context.emitter.on('_timeScrollRequest', this.handleTimeScroll);
+          this.timeScrollerRef.current.addScrollEndListener(this.clearScroll);
       }
       componentDidUpdate(prevProps) {
-          const { options } = this.context;
-          if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
-              this.timeScrollResponder.handleScroll(options.scrollTime);
-          }
-          else {
-              this.handleSize();
+          if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+              this.resetScroll();
           }
       }
       componentWillUnmount() {
-          this.context.emitter.off('_timeScrollRequest', this.timeScrollResponder.handleScroll);
+          this.context.emitter.off('_timeScrollRequest', this.handleTimeScroll);
+          this.timeScrollerRef.current.removeScrollEndListener(this.clearScroll);
+      }
+      // Scrolling
+      // -----------------------------------------------------------------------------------------------
+      resetScroll() {
+          this.handleTimeScroll(this.context.options.scrollTime);
+          const dayScroller = this.dayScrollerRef.current;
+          if (dayScroller) {
+              dayScroller.scrollTo({ x: 0 });
+          }
       }
   }
   // Utils
@@ -14251,9 +14367,6 @@ var FullCalendar = (function (exports) {
       }
   }
 
-  var css_248z$2 = ".fc-v-event{background-color:var(--fc-event-bg-color);border:1px solid var(--fc-event-border-color);display:flex;flex-direction:column;position:relative}.fc-v-event:not(.fc-event-start){border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.fc-v-event:not(.fc-event-end){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0}.fc-v-event.fc-event-selected:before{left:-10px;right:-10px}.fc-v-event .fc-event-inner{color:var(--fc-event-text-color);display:flex;flex-direction:column;flex-grow:1;min-width:0}.fc-v-event .fc-event-time{white-space:nowrap}.fc-v-event .fc-event-time,.fc-v-event .fc-event-title{overflow:hidden}.fc-v-event .fc-event-title-outer{display:flex;flex-direction:column;flex-grow:1;min-width:0}.fc-v-event .fc-event-title{bottom:0;position:sticky;top:0}.fc-v-event .fc-event-resizer-start{cursor:n-resize}.fc-v-event .fc-event-resizer-end{cursor:s-resize}.fc-v-event:not(.fc-event-selected) .fc-event-resizer{height:var(--fc-event-resizer-thickness);left:0;right:0}.fc-v-event:not(.fc-event-selected) .fc-event-resizer-start{top:calc(var(--fc-event-resizer-thickness)/-2)}.fc-v-event:not(.fc-event-selected) .fc-event-resizer-end{bottom:calc(var(--fc-event-resizer-thickness)/-2)}.fc-v-event.fc-event-selected .fc-event-resizer{left:50%;margin-left:calc(var(--fc-event-resizer-dot-total-width)/-2)}.fc-v-event.fc-event-selected .fc-event-resizer-start{top:calc(var(--fc-event-resizer-dot-total-width)/-2)}.fc-v-event.fc-event-selected .fc-event-resizer-end{bottom:calc(var(--fc-event-resizer-dot-total-width)/-2)}.fc-timegrid-axis{align-items:flex-end}.fc-timegrid-axis,.fc-timegrid-axis-inner{display:flex;flex-direction:column;justify-content:center}.fc-timegrid-axis-inner{min-height:1.5em}.fc-timegrid-slot-minor{border-style:dotted}.fc-timegrid-col{position:relative}.fc-timegrid-col.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-timegrid-bg-harness .fc-non-business{z-index:1}.fc-timegrid-bg-harness .fc-bg-event{z-index:2}.fc-timegrid-bg-harness .fc-highlight,.fc-timegrid-col-fg{z-index:3}.fc-direction-ltr .fc-timegrid-col-fg{margin:0 2.5% 0 2px}.fc-direction-rtl .fc-timegrid-col-fg{margin:0 2px 0 2.5%}.fc-timegrid-event{border-radius:3px;bottom:0;font-size:var(--fc-small-font-size);left:0;margin-bottom:1px;position:absolute;right:0;top:0;z-index:3}.fc-timegrid-event-inset,.fc-timegrid-event.fc-event-mirror{box-shadow:0 0 0 1px var(--fc-page-bg-color)}.fc-timegrid-harness-plain>.fc-timegrid-event{position:static}.fc-timegrid-event .fc-event-inner{padding:1px 1px 0}.fc-timegrid-event-short .fc-event-inner{flex-direction:row;overflow:hidden}.fc-timegrid-event .fc-event-time{font-size:var(--fc-small-font-size);margin-bottom:1px;white-space:nowrap}.fc-timegrid-event-short .fc-event-time:after{content:\"\\00a0-\\00a0\"}.fc-timegrid-event-short .fc-event-title,.fc-timegrid-more-link{font-size:var(--fc-small-font-size)}.fc-timegrid-more-link{background:var(--fc-more-link-bg-color);border-radius:3px;box-shadow:0 0 0 1px var(--fc-page-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;margin-bottom:1px;z-index:9999}.fc-direction-ltr .fc-timegrid-more-link{right:0}.fc-direction-rtl .fc-timegrid-more-link{left:0}.fc-timegrid-more-link-inner{padding:3px 2px}.fc-timegrid-now-indicator-container{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.fc-timegrid-now-indicator-arrow,.fc-timegrid-now-indicator-line{pointer-events:none}.fc-timegrid-now-indicator-line{border-width:1px 0 0;left:0;right:0}.fc-timegrid-now-indicator-arrow,.fc-timegrid-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;position:absolute;z-index:4}.fc-timegrid-now-indicator-arrow{margin-top:-5px}.fc-direction-ltr .fc-timegrid-now-indicator-arrow{border-bottom-color:transparent;border-top-color:transparent;border-width:5px 0 5px 6px;left:0}.fc-direction-rtl .fc-timegrid-now-indicator-arrow{border-bottom-color:transparent;border-top-color:transparent;border-width:5px 6px 5px 0;right:0}";
-  injectStyles(css_248z$2);
-
   const OPTION_REFINERS$2 = {
       allDaySlot: Boolean,
   };
@@ -14281,6 +14394,9 @@ var FullCalendar = (function (exports) {
       },
   });
 
+  var css_248z$1 = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-table{border-spacing:0;width:100%}.fc-table>*>*>*{border-color:var(--fc-border-color);border-style:solid;border-width:0 0 1px;padding:0}.fc-table>:last-child>:last-child>*{border-bottom-width:0}.fc-list-day-inner,.fc-list-event-dot-cell,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-cell{padding-right:0}.fc-direction-rtl .fc-list-event-dot-cell{padding-left:0}.fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc-list-empty-inner{margin:5em 0}.fc-list-day-cell-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day-inner{background:var(--fc-neutral-bg-color);display:flex;justify-content:space-between}.fc-list-event.fc-event-forced-url{cursor:pointer}.fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-dot-cell,.fc-list-event-time{white-space:nowrap;width:1px}.fc-list-event-dot{border:calc(var(--fc-list-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-list-event-dot-width)/2);box-sizing:content-box;display:inline-block;height:0;width:0}.fc-list-event-title a{color:inherit;text-decoration:none}.fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
+  injectStyles(css_248z$1);
+
   class ListViewHeaderRow extends BaseComponent {
       constructor() {
           super(...arguments);
@@ -14332,13 +14448,13 @@ var FullCalendar = (function (exports) {
       render() {
           let { props, context } = this;
           let { options } = context;
-          let { seg, timeHeaderId, eventHeaderId, dateHeaderId } = props;
+          let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
           let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
           return (_(EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
                   'fc-list-event',
-                  seg.eventRange.def.url && 'fc-event-forced-url',
-              ], defaultGenerator: () => renderEventInnerContent(seg, context) /* weird */, seg: seg, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (_(k$1, null,
-              buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId),
+                  eventRange.def.url && 'fc-event-forced-url',
+              ], defaultGenerator: () => renderEventInnerContent(eventRange, context) /* weird */, eventRange: eventRange, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (_(k$1, null,
+              buildTimeContent(eventRange, props.isStart, props.isEnd, props.segStart, props.segEnd, timeFormat, context, timeHeaderId, dateHeaderId),
               _("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
                   _("span", { className: "fc-list-event-dot", style: {
                           borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
@@ -14346,33 +14462,33 @@ var FullCalendar = (function (exports) {
               _(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
       }
   }
-  function renderEventInnerContent(seg, context) {
-      let interactiveAttrs = getSegAnchorAttrs(seg, context);
-      return (_("a", Object.assign({}, interactiveAttrs), seg.eventRange.def.title));
+  function renderEventInnerContent(eventRange, context) {
+      let interactiveAttrs = getEventRangeAnchorAttrs(eventRange, context);
+      return (_("a", Object.assign({}, interactiveAttrs), eventRange.def.title));
   }
-  function buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId) {
+  function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
       let { options } = context;
       if (options.displayEventTime !== false) {
-          let eventDef = seg.eventRange.def;
-          let eventInstance = seg.eventRange.instance;
+          let eventDef = eventRange.def;
+          let eventInstance = eventRange.instance;
           let doAllDay = false;
           let timeText;
           if (eventDef.allDay) {
               doAllDay = true;
           }
-          else if (isMultiDayRange(seg.eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
-              if (seg.isStart) {
-                  timeText = buildSegTimeText(seg, timeFormat, context, null, null, eventInstance.range.start, seg.end);
+          else if (isMultiDayRange(eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
+              if (isStart) {
+                  timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, eventInstance.range.start, segEnd);
               }
-              else if (seg.isEnd) {
-                  timeText = buildSegTimeText(seg, timeFormat, context, null, null, seg.start, eventInstance.range.end);
+              else if (isEnd) {
+                  timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
               }
               else {
                   doAllDay = true;
               }
           }
           else {
-              timeText = buildSegTimeText(seg, timeFormat, context);
+              timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
           }
           if (doAllDay) {
               let renderProps = {
@@ -14454,7 +14570,7 @@ var FullCalendar = (function (exports) {
                       innerNodes.push(_(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
                       daySegs = sortEventSegs(daySegs, options.eventOrder);
                       for (let seg of daySegs) {
-                          innerNodes.push(_(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, getSegMeta(seg, todayRange, nowDate))));
+                          innerNodes.push(_(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd, segStart: seg.start, segEnd: seg.end, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
                       }
                   }
               }
@@ -14490,7 +14606,6 @@ var FullCalendar = (function (exports) {
               segRange = intersectRanges(range, dayRanges[dayIndex]);
               if (segRange) {
                   seg = {
-                      component: this,
                       eventRange,
                       start: segRange.start,
                       end: segRange.end,
@@ -14545,9 +14660,6 @@ var FullCalendar = (function (exports) {
       return segsByDay;
   }
 
-  var css_248z$1 = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-table{border-spacing:0;width:100%}.fc-table>*>*>*{border-color:var(--fc-border-color);border-style:solid;border-width:0 0 1px;padding:0}.fc-table>:last-child>:last-child>*{border-bottom-width:0}.fc-list-day-inner,.fc-list-event-dot-cell,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-cell{padding-right:0}.fc-direction-rtl .fc-list-event-dot-cell{padding-left:0}.fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc-list-empty-inner{margin:5em 0}.fc-list-day-cell-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day-inner{background:var(--fc-neutral-bg-color);display:flex;justify-content:space-between}.fc-list-event.fc-event-forced-url{cursor:pointer}.fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-dot-cell,.fc-list-event-time{white-space:nowrap;width:1px}.fc-list-event-dot{border:calc(var(--fc-list-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-list-event-dot-width)/2);box-sizing:content-box;display:inline-block;height:0;width:0}.fc-list-event-title a{color:inherit;text-decoration:none}.fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
-  injectStyles(css_248z$1);
-
   const OPTION_REFINERS$1 = {
       listDayFormat: createFalsableFormatter,
       listDaySideFormat: createFalsableFormatter,
@@ -14639,9 +14751,13 @@ var FullCalendar = (function (exports) {
           this.splitDateProfileByMonth = memoize(splitDateProfileByMonth);
           this.buildMonthFormat = memoize(buildMonthFormat);
           // ref
-          this.rootElRef = m$1(); // also the scroll container
+          this.scrollerRef = m$1();
           this.innerElRef = m$1();
-          this.handleClientWidth = (clientWidth) => {
+          // internal
+          this.scrollDate = null;
+          // Sizing
+          // -----------------------------------------------------------------------------------------------
+          this.handleWidth = (width) => {
               let { xGap, xPadding } = this.state;
               // for first time, assume 2 columns and query gap/padding
               if (xGap == null) {
@@ -14655,37 +14771,38 @@ var FullCalendar = (function (exports) {
                           Math.abs(box0.left - box1.right),
                           Math.abs(box0.right - box1.left),
                       ].sort(compareNumbers);
-                      xPadding = clientWidth - xSpan;
+                      xPadding = width - xSpan;
                   }
               }
-              this.setState({ clientWidth, xGap, xPadding });
+              this.setState({ width, xGap, xPadding });
           };
-          this.timeScrollResponder = new ScrollResponder((_time) => {
-              // HACK to scroll to day
-              if (this.state.clientWidth != null) {
-                  const { currentDate } = this.props.dateProfile;
-                  const rootEl = this.rootElRef.current;
+          this.updateScroll = () => {
+              if (this.scrollDate != null && this.state.width != null) {
+                  const scroller = this.scrollerRef.current;
                   const innerEl = this.innerElRef.current;
-                  const monthEl = innerEl.querySelector(`[data-date="${formatIsoMonthStr(currentDate)}"]`);
-                  rootEl.scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
+                  const monthEl = innerEl.querySelector(`[data-date="${formatIsoMonthStr(this.scrollDate)}"]`);
+                  const scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
                   monthEl.getBoundingClientRect().top -
                       innerEl.getBoundingClientRect().top);
-                  return true;
+                  scroller.scrollTo({ y: scrollTop });
               }
-              return false;
-          });
+          };
+          this.clearScroll = () => {
+              this.scrollDate = null;
+          };
       }
       render() {
           const { context, props, state } = this;
           const { options } = context;
-          const colCount = state.clientWidth == null
+          const verticalScrolling = !props.forPrint && !getIsHeightAuto(options);
+          const colCount = state.width == null
               ? 2
-              : Math.min(options.multiMonthMaxColumns, Math.floor((state.clientWidth - state.xPadding + state.xGap) /
+              : Math.min(options.multiMonthMaxColumns, Math.floor((state.width - state.xPadding + state.xGap) /
                   (options.multiMonthMinWidth + state.xGap)));
-          const monthWidth = state.clientWidth == null
+          const monthWidth = state.width == null
               ? '34%' // will expand. now small enough to be 1/3. for allowing gap
               : Math.floor(// exact values can cause expansion to other rows
-              (state.clientWidth - state.xPadding - (state.xGap * (colCount - 1))) /
+              (state.width - state.xPadding - (state.xGap * (colCount - 1))) /
                   colCount);
           const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
           const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles);
@@ -14694,36 +14811,42 @@ var FullCalendar = (function (exports) {
               (colCount === 1) ?
                   'fc-multimonth-singlecol' :
                   'fc-multimonth-multicol',
-              getIsHeightAuto(options) ?
-                  '' :
-                  'fc-multimonth-scroll',
+              'fc-flex-column',
               'fc-border', // BAD to mix this with size-listening?
           ];
-          return (_(NowTimer, { unit: "day" }, (nowDate, todayRange) => (_(ViewContainer, { elRef: this.rootElRef, elClasses: rootClassNames, viewSpec: context.viewSpec },
-              _("div", { ref: this.innerElRef, className: 'fc-multimonth-inner' }, monthDateProfiles.map((monthDateProfile, i) => {
-                  const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
-                  return (_(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: monthWidth })));
-              }))))));
+          return (_(NowTimer, { unit: "day" }, (nowDate, todayRange) => (_(ViewContainer, { elClasses: rootClassNames, viewSpec: context.viewSpec },
+              _(Scroller, { vertical: verticalScrolling, elClassNames: [
+                      verticalScrolling ? 'fc-liquid' : '',
+                  ], ref: this.scrollerRef, widthRef: this.handleWidth },
+                  _("div", { ref: this.innerElRef, className: 'fc-multimonth-inner' }, monthDateProfiles.map((monthDateProfile, i) => {
+                      const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
+                      return (_(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: monthWidth })));
+                  })))))));
       }
+      // Lifecycle
+      // -----------------------------------------------------------------------------------------------
       componentDidMount() {
-          const { context } = this;
-          const { options } = context;
-          this.unwatchWidth = watchWidth(this.rootElRef.current, this.handleClientWidth);
-          context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
-          this.timeScrollResponder.handleScroll(options.scrollTime);
+          this.resetScroll();
+          this.scrollerRef.current.addScrollEndListener(this.clearScroll);
       }
       componentDidUpdate(prevProps) {
-          const { options } = this.context;
-          if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
-              this.timeScrollResponder.handleScroll(options.scrollTime);
+          if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+              this.resetScroll();
           }
           else {
-              this.timeScrollResponder.drain();
+              // NOT optimal to update so often
+              // TODO: isolate dependencies of scroll coordinate
+              this.updateScroll();
           }
       }
       componentWillUnmount() {
-          this.unwatchWidth();
-          this.context.emitter.off('_timeScrollRequest', this.timeScrollResponder.handleScroll);
+          this.scrollerRef.current.removeScrollEndListener(this.clearScroll);
+      }
+      // Scrolling
+      // -----------------------------------------------------------------------------------------------
+      resetScroll() {
+          this.scrollDate = this.props.dateProfile.currentDate;
+          this.updateScroll();
       }
   }
   // date profile
@@ -14789,7 +14912,7 @@ var FullCalendar = (function (exports) {
       multiMonthMinWidth: Number,
   };
 
-  var css_248z = ".fc-multimonth-scroll{overflow-x:hidden;overflow-y:scroll}.fc-multimonth-inner{display:flex;flex-wrap:wrap}.fc-multimonth-multicol .fc-multimonth-month{margin:0 1.2em 1.2em}.fc-multimonth-multicol .fc-multimonth-title{padding:1em 0}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-title{font-size:1.2em;font-weight:700;text-align:center}.fc-multimonth-header-row{border-top:1px solid var(--fc-border-color)}.fc-multimonth-header-row,.fc-multimonth-month{border-bottom:1px solid var(--fc-border-color)}.fc-multimonth-singlecol .fc-multimonth-month:last-child{border-bottom:0}.fc-multimonth-multicol .fc-multimonth-body,.fc-multimonth-multicol .fc-multimonth-header-row{border-left:1px solid var(--fc-border-color);border-right:1px solid var(--fc-border-color);font-size:.9em;line-height:1}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:sticky;top:0;z-index:2}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-body{position:relative;z-index:1}";
+  var css_248z = ".fc-multimonth-inner{display:flex;flex-wrap:wrap}.fc-multimonth-multicol .fc-multimonth-month{margin:0 1.2em 1.2em}.fc-multimonth-multicol .fc-multimonth-title{padding:1em 0}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-title{font-size:1.2em;font-weight:700;text-align:center}.fc-multimonth-header-row{border-top:1px solid var(--fc-border-color)}.fc-multimonth-header-row,.fc-multimonth-month{border-bottom:1px solid var(--fc-border-color)}.fc-multimonth-singlecol .fc-multimonth-month:last-child{border-bottom:0}.fc-multimonth-multicol .fc-multimonth-body,.fc-multimonth-multicol .fc-multimonth-header-row{border-left:1px solid var(--fc-border-color);border-right:1px solid var(--fc-border-color);font-size:.9em;line-height:1}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:sticky;top:0;z-index:2}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-body{position:relative;z-index:1}";
   injectStyles(css_248z);
 
   var index = createPlugin({