fix now-indicator bugs

packages-premium

@@ -1 +1 @@
-Subproject commit 81629d72f0e0f449f0ad325c4d4c130b9bd4035a
+Subproject commit 670e39dba5af42386362f62737302b0cf0077920

packages/core/src/NowTimer.ts

@@ -34,6 +34,8 @@ export default class NowTimer extends SubRenderer {
       callback(addMs(initialNowDate, new Date().valueOf() - initialNowQueriedMs))
     }
 
+    update()
+
     // wait until the beginning of the next interval
     let delay = dateEnv.add(
       dateEnv.startOf(initialNowDate, unit),

packages/core/src/styles/_scrollgrid.scss

@@ -37,6 +37,10 @@
   overflow: hidden;
 }
 
+.scroller {
+  position: relative; // for abs-positioned elements within
+}
+
 .shrink {
   white-space: nowrap;
 }

packages/timegrid/src/DayTimeCols.tsx

@@ -37,7 +37,6 @@ export interface DayTimeColsProps {
 
 interface DayTimeColsState {
   nowIndicatorDate: DateMarker
-  nowIndicatorSegs: TimeColsSeg[]
 }
 
 
@@ -69,7 +68,7 @@ export default class DayTimeCols extends DateComponent<DayTimeColsProps, DayTime
         renderBgIntro={props.renderBgIntro}
         renderIntro={props.renderIntro}
         nowIndicatorDate={state.nowIndicatorDate}
-        nowIndicatorSegs={state.nowIndicatorSegs}
+        nowIndicatorSegs={state.nowIndicatorDate && this.slicer.sliceNowDate(state.nowIndicatorDate, this.context.calendar, this.dayRanges)}
       />
     )
   }
@@ -112,8 +111,7 @@ export default class DayTimeCols extends DateComponent<DayTimeColsProps, DayTime
 
   handleNowDate = (date: DateMarker) => {
     this.setState({
-      nowIndicatorDate: date,
-      nowIndicatorSegs: this.slicer.sliceNowDate(date, this.context.calendar, this.dayRanges)
+      nowIndicatorDate: date
     })
   }
 

packages/timegrid/src/TimeCols.tsx

@@ -18,7 +18,8 @@ import {
   DateProfile,
   sortEventSegs,
   memoize,
-  subrenderer
+  subrenderer,
+  setRef
 } from '@fullcalendar/core'
 import { DayBgRow, DayBgCellModel } from '@fullcalendar/daygrid'
 import TimeColsEvents from './TimeColsEvents'
@@ -74,7 +75,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
   private snapDuration: Duration // granularity of time for dragging and selecting
   private snapsPerSlot: any
 
-  private contentSkeletonEl: HTMLElement
+  private rootEl: HTMLElement
   private colContainerEls: HTMLElement[] // containers for each column
   private businessContainerEls: HTMLElement[]
   private highlightContainerEls: HTMLElement[]
@@ -102,7 +103,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
     this.processOptions(context.options)
 
     return (
-      <div class='fc-time-grid' ref={props.rootElRef}>
+      <div class='fc-time-grid' ref={this.handleRootEl}>
         <div class='fc-bg'>
           <table class={theme.getClass('table')}>
             {props.colGroupNode}
@@ -161,6 +162,12 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
   }
 
 
+  handleRootEl = (rootEl: HTMLElement | null) => {
+    this.rootEl = rootEl
+    setRef(this.props.rootElRef, rootEl)
+  }
+
+
   handleBgCellEls = (colEls: HTMLElement[] | null) => {
     if (colEls) {
       this.colEls = colEls
@@ -190,12 +197,10 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
   }
 
 
-  handleContainerEls = (containers: TimeColsContentSkeletonContainers | null, contentSkeletonEl: HTMLElement | null) => {
-    if (!contentSkeletonEl) {
+  handleContainerEls = (containers: TimeColsContentSkeletonContainers | null) => {
+    if (!containers) {
       this.subrenderDestroy()
-
     } else {
-      this.contentSkeletonEl = contentSkeletonEl
       __assign(this, containers)
     }
   }
@@ -252,11 +257,6 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
       }),
       this.subrenderMirror(props, this.mirrorContainerEls, options)
     ]
-
-    this.renderNowIndicator({
-      date: props.nowIndicatorDate,
-      segs: props.nowIndicatorSegs
-    })
   }
 
 
@@ -320,6 +320,11 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
         segRenderer.assignSizes(forced, this)
       }
     }
+
+    this.renderNowIndicator({ // why in sizing???
+      date: this.props.nowIndicatorDate,
+      segs: this.props.nowIndicatorSegs
+    })
   }
 
 
@@ -351,7 +356,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
       let arrowEl = document.createElement('div')
       arrowEl.className = 'fc-now-indicator fc-now-indicator-arrow'
       arrowEl.style.top = top + 'px'
-      this.contentSkeletonEl.appendChild(arrowEl)
+      this.rootEl.appendChild(arrowEl)
       nodes.push(arrowEl)
     }
 

packages/timegrid/src/TimeColsContentSkeleton.tsx

@@ -9,7 +9,7 @@ import {
 export interface TimeColsContentSkeletonProps {
   colCnt: number
   renderIntro: () => VNode[]
-  onReceiveContainerEls?: (containers: TimeColsContentSkeletonContainers | null, rootEl: HTMLElement | null) => void
+  onReceiveContainerEls?: (containers: TimeColsContentSkeletonContainers | null) => void
 }
 
 export interface TimeColsContentSkeletonContainers {
@@ -63,7 +63,7 @@ export default class TimeColsContentSkeleton extends BaseComponent<TimeColsConte
   componentWillUnmount() {
     let { onReceiveContainerEls } = this.props
     if (onReceiveContainerEls) {
-      onReceiveContainerEls(null, null)
+      onReceiveContainerEls(null)
     }
   }
 
@@ -87,7 +87,7 @@ export default class TimeColsContentSkeleton extends BaseComponent<TimeColsConte
         bgContainerEls,
         highlightContainerEls,
         businessContainerEls
-      }, rootEl)
+      })
     }
   }