lots of code fixes

packages/core/src/CalendarComponent.tsx

@@ -80,7 +80,7 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
     } else if (options.contentHeight != null) {
       viewHeight = options.contentHeight
     } else {
-      viewAspectRatio = options.aspectRatio
+      viewAspectRatio = Math.max(options.aspectRatio, 0.5) // prevent from getting too tall
     }
 
     // TODO: move this somewhere after real render!

packages/core/src/common/DayHeader.tsx

@@ -4,7 +4,7 @@ import { DateMarker } from '../datelib/marker'
 import { DateProfile } from '../DateProfileGenerator'
 import { createFormatter } from '../datelib/formatting'
 import { computeFallbackHeaderFormat } from './table-utils'
-import { VNode, h, createRef } from '../vdom'
+import { VNode, h } from '../vdom'
 import TableDateCell from './TableDateCell'
 
 
@@ -18,10 +18,6 @@ export interface DayHeaderProps {
 
 export default class DayHeader extends BaseComponent<DayHeaderProps> { // TODO: rename to DayHeaderTr?
 
-  private rootElRef = createRef<HTMLDivElement>()
-
-  get rootEl() { return this.rootElRef.current }
-
 
   render(props: DayHeaderProps, state: {}, context: ComponentContext) {
     let { dates, datesRepDistinctDays } = props

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -21,6 +21,7 @@ export interface SimpleScrollGridProps {
 }
 
 export interface SimpleScrollGridSection extends SectionConfig {
+  key?: string
   chunk?: ChunkConfig
 }
 
@@ -77,7 +78,7 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
     }
 
     return (
-      <tr class={getSectionClassNames(sectionConfig, this.props.vGrow).join(' ')}>
+      <tr key={sectionConfig.key} class={getSectionClassNames(sectionConfig, this.props.vGrow).join(' ')}>
         {this.renderChunkTd(sectionConfig, sectionI, microColGroupNode, sectionConfig.chunk)}
       </tr>
     )

packages/core/src/util/dom-geom.ts

@@ -1,6 +1,6 @@
 import { Rect } from './geom'
 import { getIsRtlScrollbarOnLeft } from './scrollbar-side'
-import { getScrollbarWidths } from './scrollbar-width'
+import { computeScrollbarWidthsForEl } from './scrollbar-width'
 
 export interface EdgeInfo {
   borderLeft: number
@@ -23,8 +23,9 @@ export function computeEdges(el: HTMLElement, getPadding = false): EdgeInfo { //
   let borderRight = parseInt(computedStyle.borderRightWidth, 10) || 0
   let borderTop = parseInt(computedStyle.borderTopWidth, 10) || 0
   let borderBottom = parseInt(computedStyle.borderBottomWidth, 10) || 0
-  let scrollbarLeftRight = el.clientHeight < el.scrollHeight ? getScrollbarWidths().y : 0
-  let scrollbarBottom = el.clientWidth < el.scrollWidth ? getScrollbarWidths().x : 0
+  let badScrollbarWidths = computeScrollbarWidthsForEl(el) // includes border!
+  let scrollbarLeftRight = badScrollbarWidths.y - borderLeft - borderRight
+  let scrollbarBottom = badScrollbarWidths.x - borderTop - borderBottom
 
   let res: EdgeInfo = {
     borderLeft,

packages/core/src/util/scrollbar-width.ts

@@ -20,10 +20,16 @@ function computeScrollbarWidths(): ScrollbarWidths {
   let el = document.createElement('div')
   el.style.overflow = 'scroll'
   document.body.appendChild(el)
-  let res = {
+  let res = computeScrollbarWidthsForEl(el)
+  document.body.removeChild(el)
+  return res
+}
+
+
+// WARNING: will include border
+export function computeScrollbarWidthsForEl(el: HTMLElement): ScrollbarWidths {
+  return {
     x: el.offsetHeight - el.clientHeight,
     y: el.offsetWidth - el.clientWidth
   }
-  document.body.removeChild(el)
-  return res
 }

packages/daygrid/src/DayTable.tsx

@@ -11,7 +11,8 @@ import {
   DateRange,
   Slicer,
   Hit,
-  ComponentContext
+  ComponentContext,
+  RefObject
 } from '@fullcalendar/core'
 import Table, { TableSeg  } from './Table'
 
@@ -36,6 +37,7 @@ export interface DayTableProps {
   cellWeekNumbersVisible: boolean // display week numbers in day cell?
   eventLimit: boolean | number
   vGrow: boolean
+  headerAlignElRef?: RefObject<HTMLElement> // for more popover alignment
 }
 
 export default class DayTable extends DateComponent<DayTableProps, ComponentContext> {
@@ -63,6 +65,7 @@ export default class DayTable extends DateComponent<DayTableProps, ComponentCont
         cellWeekNumbersVisible={props.cellWeekNumbersVisible}
         eventLimit={props.eventLimit}
         vGrow={props.vGrow}
+        headerAlignElRef={props.headerAlignElRef}
       />
     )
   }

packages/daygrid/src/DayTableView.tsx

@@ -58,6 +58,7 @@ export default class DayTableView extends TableView { // TODO: use clientWidth/c
           cellWeekNumbersVisible={cellWeekNumbersVisible}
           eventLimit={options.eventLimit}
           vGrow={!props.isHeightAuto}
+          headerAlignElRef={this.headerElRef}
         />
       )
     )

packages/daygrid/src/Popover.tsx

@@ -9,6 +9,7 @@ export interface PopoverProps {
   children?: ComponentChildren
   extraClassName?: string
   alignmentEl: HTMLElement
+  topAlignmentEl?: HTMLElement
   onClose?: () => void
 }
 
@@ -87,12 +88,12 @@ export default class Popover extends BaseComponent<PopoverProps> {
         but need to ensure that all other components have updated size first (for alignmentEl)
   */
   updateSize() {
-    let { alignmentEl } = this.props
+    let { alignmentEl, topAlignmentEl } = this.props
     let rootEl = this.rootElRef.current
     let dims = rootEl.getBoundingClientRect() // only used for width,height
     let alignment = alignmentEl.getBoundingClientRect()
 
-    let top = alignment.top
+    let top = topAlignmentEl ? topAlignmentEl.getBoundingClientRect().top : alignment.top
     top = Math.min(top, window.innerHeight - dims.height - PADDING_FROM_VIEWPORT)
     top = Math.max(top, PADDING_FROM_VIEWPORT)
 

packages/daygrid/src/Table.tsx

@@ -15,7 +15,8 @@ import {
   VNode,
   RefMap,
   DateComponent,
-  setRef
+  setRef,
+  RefObject
 } from '@fullcalendar/core'
 import TableEvents from './TableEvents'
 import TableMirrorEvents from './TableMirrorEvents'
@@ -39,6 +40,7 @@ export interface TableProps extends TableBaseProps {
   colGroupNode: VNode
   eventLimit: boolean | number
   vGrow: boolean
+  headerAlignElRef?: RefObject<HTMLElement> // for more popover alignment
 }
 
 export interface TableSeg extends Seg {
@@ -123,6 +125,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
           extraClassName='fc-more-popover'
           title={segPopoverState.title}
           alignmentEl={segPopoverState.alignmentEl}
+          topAlignmentEl={props.cells.length === 1 ? props.headerAlignElRef.current : null /* align with header top when only one row */}
           onClose={this.handlePopoverClose}
           ref={this.popoverRef}
         >
@@ -347,7 +350,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
   updateEventLimitSizing() {
     let { props, rowStructs } = this
 
-    if (props.vGrow) {
+    if (props.eventLimit) {
       this._limitRows(props.eventLimit, this.rowElRefs.collect(), rowStructs, this.props.cells, this.context)
 
     } else {

packages/daygrid/src/TableSkeleton.tsx

@@ -114,14 +114,13 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
 
 
   renderNumberTr(row: number) {
-    let { props, context } = this
+    let { props } = this
     let intro = props.renderNumberIntro(row, props.cells)
 
     return (
       <tr>
-        {!context.isRtl && intro}
+        {intro}
         {this.renderNumberCells(row)}
-        {context.isRtl && intro}
       </tr>
     )
   }

packages/daygrid/src/TableSkeletonDayCell.tsx

@@ -7,8 +7,6 @@ import {
   getDayClasses,
   GotoAnchor,
   ComponentContext,
-  Ref,
-  setRef,
   createFormatter
 } from '@fullcalendar/core'
 
@@ -18,7 +16,6 @@ export interface TableSkeletonDayCellProps {
   dateProfile: DateProfile
   isDayNumbersVisible: boolean
   cellWeekNumbersVisible: boolean
-  elRef?: Ref<HTMLTableCellElement>
 }
 
 const DAY_NUM_FORMAT = createFormatter({ day: 'numeric' })
@@ -55,7 +52,6 @@ export default class TableSkeletonDayCell extends BaseComponent<TableSkeletonDay
 
     return (
       <td
-        ref={this.handleEl}
         key={dateStr /* fresh rerender for new date, mostly because of dayRender */}
         class={classNames.join(' ')}
         {...attrs}
@@ -78,23 +74,4 @@ export default class TableSkeletonDayCell extends BaseComponent<TableSkeletonDay
     )
   }
 
-
-  handleEl = (el: HTMLTableCellElement | null) => {
-    let { props } = this
-
-    if (el) {
-      let { calendar, view, dateEnv } = this.context
-
-      calendar.publiclyTrigger('dayRender', [
-        {
-          date: dateEnv.toDate(props.date),
-          el,
-          view
-        }
-      ])
-    }
-
-    setRef(props.elRef, el)
-  }
-
 }

packages/daygrid/src/TableView.tsx

@@ -7,7 +7,8 @@ import {
   GotoAnchor,
   SimpleScrollGrid,
   SimpleScrollGridSection,
-  ChunkContentCallbackArgs
+  ChunkContentCallbackArgs,
+  createRef
 } from '@fullcalendar/core'
 import TableDateProfileGenerator from './TableDateProfileGenerator'
 
@@ -24,6 +25,7 @@ const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
 export default abstract class TableView<State={}> extends View<State> {
 
   protected processOptions = memoize(this._processOptions)
+  protected headerElRef = createRef<HTMLTableCellElement>()
   private colWeekNumbersVisible: boolean // computed option
 
 
@@ -44,6 +46,7 @@ export default abstract class TableView<State={}> extends View<State> {
       sections.push({
         type: 'head',
         chunk: {
+          elRef: this.headerElRef,
           rowContent: headerRowContent
         }
       })

packages/timegrid/src/DayTimeColsView.tsx

@@ -48,6 +48,7 @@ export default class DayTimeColsView extends TimeColsView {
           cellWeekNumbersVisible={false}
           eventLimit={this.getAllDayEventLimit()}
           vGrow={false}
+          headerAlignElRef={this.headerElRef}
         />
       )),
       (contentArg: ChunkContentCallbackArgs) => (

packages/timegrid/src/TimeColsSlats.tsx

@@ -131,7 +131,7 @@ export class TimeColsSlatsBody extends BaseComponent<TimeColsSlatsBodyProps> {
 
 
   render(props: TimeColsSlatsBodyProps, state: {}, context: ComponentContext) {
-    let { dateEnv, isRtl, options } = context
+    let { dateEnv, options } = context
     let { dateProfile, slotDuration, slatElRefs } = props
 
     let labelInterval = this.getLabelInterval(options.slotLabelInterval, slotDuration)
@@ -169,9 +169,8 @@ export class TimeColsSlatsBody extends BaseComponent<TimeColsSlatsBodyProps> {
           data-time={formatIsoTimeString(slotDate)}
           class={isLabeled ? '' : 'fc-minor'}
         >
-          {!isRtl && axisNode}
+          {axisNode}
           <td />
-          {isRtl && axisNode}
         </tr>
       )
 

packages/timegrid/src/TimeColsView.tsx

@@ -24,8 +24,9 @@ const AUTO_ALL_DAY_EVENT_LIMIT = 5
 export default abstract class TimeColsView extends View {
 
   protected allDaySplitter = new AllDaySplitter() // for use by subclasses
+  protected headerElRef = createRef<HTMLTableCellElement>()
   private rootElRef = createRef<HTMLDivElement>()
-  private scrollerElRef = createRef<HTMLDivElement>()
+  private scrollerElRef = window['asdf'] = createRef<HTMLDivElement>()
 
 
   // rendering
@@ -45,6 +46,7 @@ export default abstract class TimeColsView extends View {
       sections.push({
         type: 'head',
         chunk: {
+          elRef: this.headerElRef,
           rowContent: headerRowContent
         }
       })
@@ -52,6 +54,7 @@ export default abstract class TimeColsView extends View {
 
     if (allDayContent) {
       sections.push({
+        key: 'all-day',
         type: 'body',
         chunk: {
           content: allDayContent
@@ -69,6 +72,7 @@ export default abstract class TimeColsView extends View {
     }
 
     sections.push({
+      key: 'timed',
       type: 'body',
       vGrow: true,
       vGrowRows: Boolean(context.options.expandRows),