move queryHit logic to inner components, exposing extraDateSpan

packages-premium

@@ -1 +1 @@
-Subproject commit 501f3f2c2dff395eee152c12c8a13b504e7f1234
+Subproject commit 93ccd1ad6527eeab906791656d53c1d269ecf79d

packages/common/src/common/DayTableModel.ts

@@ -16,6 +16,7 @@ export interface DayTableCell {
   extraHookProps?: Dictionary
   extraDataAttrs?: Dictionary
   extraClassNames?: string[]
+  extraDateSpan?: Dictionary
 }
 
 export class DayTableModel {

packages/common/src/common/MoreLinkRoot.tsx

@@ -1,6 +1,7 @@
 import { EventApi } from '../api/EventApi'
 import { Seg } from '../component/DateComponent'
 import { DateMarker } from '../datelib/marker'
+import { Dictionary } from '../options'
 import { ComponentChildren, createElement, Ref, RefObject } from '../vdom'
 import { BaseComponent } from '../vdom-util'
 import { ViewApi } from '../ViewApi'
@@ -19,6 +20,7 @@ export interface MoreLinkRootProps { // what the MoreLinkRoot component receives
   allDayDate: DateMarker | null
   allSegs: Seg[]
   hiddenSegs: Seg[]
+  extraDateSpan?: Dictionary
   positionElRef: RefObject<HTMLElement>
   defaultContent?: (hookProps: MoreLinkContentArg) => ComponentChildren // not used by anyone yet
   children: MoreLinkChildren
@@ -101,7 +103,7 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
     }
 
     if (!moreLinkClick || moreLinkClick === 'popover') {
-      console.log('open popover', date, props.hiddenSegs, props.positionElRef.current)
+      console.log('open popover', date, props.hiddenSegs, props.positionElRef.current, props.extraDateSpan)
       /*
       (!props.forPrint && (
         <MorePopover
@@ -120,16 +122,6 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
           todayRange={todayRange}
         />
       )
-
-      let morePopoverHit = morePopover ? morePopover.positionToHit(leftPosition, topPosition, this.rootEl) : null
-      let { morePopoverState } = this.state
-      if (morePopoverHit) {
-        return {
-          row: morePopoverState.fromRow,
-          col: morePopoverState.fromCol,
-          ...morePopoverHit,
-        }
-      }
       */
 
     } else if (typeof moreLinkClick === 'string') { // a view name

packages/common/src/interactions/interaction.ts

@@ -3,7 +3,7 @@ import { Hit } from './hit'
 
 export abstract class Interaction {
   component: DateComponent<any>
-  isHitComboAllowed: (hit0: Hit, hit1: Hit) => boolean
+  isHitComboAllowed: ((hit0: Hit, hit1: Hit) => boolean) | null
 
   constructor(settings: InteractionSettings) {
     this.component = settings.component

packages/daygrid/src/DayTable.tsx

@@ -10,7 +10,6 @@ import {
   ViewContext,
   RefObject,
   CssDimValue,
-  Hit,
   DateProfile,
 } from '@fullcalendar/common'
 import { Table } from './Table'
@@ -50,7 +49,6 @@ export class DayTable extends DateComponent<DayTableProps, ViewContext> {
     return (
       <Table
         ref={this.tableRef}
-        elRef={this.handleRootEl}
         {...this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, props.dayTableModel)}
         dateProfile={props.dateProfile}
         cells={props.dayTableModel.cells}
@@ -68,37 +66,4 @@ export class DayTable extends DateComponent<DayTableProps, ViewContext> {
       />
     )
   }
-
-  handleRootEl = (rootEl: HTMLDivElement | null) => {
-    if (rootEl) {
-      this.context.registerInteractiveComponent(this, { el: rootEl })
-    } else {
-      this.context.unregisterInteractiveComponent(this)
-    }
-  }
-
-  prepareHits() {
-    this.tableRef.current.prepareHits()
-  }
-
-  queryHit(positionLeft: number, positionTop: number): Hit {
-    let rawHit = this.tableRef.current.positionToHit(positionLeft, positionTop)
-
-    if (rawHit) {
-      return {
-        dateProfile: this.props.dateProfile,
-        dateSpan: rawHit.dateSpan,
-        dayEl: rawHit.dayEl,
-        rect: {
-          left: rawHit.relativeRect.left,
-          right: rawHit.relativeRect.right,
-          top: rawHit.relativeRect.top,
-          bottom: rawHit.relativeRect.bottom,
-        },
-        layer: 0,
-      }
-    }
-
-    return null
-  }
 }

packages/daygrid/src/MorePopover.tsx

@@ -10,6 +10,7 @@ import {
   DayCellContent,
   DateProfile,
   Hit,
+  Dictionary,
 } from '@fullcalendar/common'
 import { TableSeg } from './TableSeg'
 import { TableBlockEvent } from './TableBlockEvent'
@@ -27,6 +28,7 @@ export interface MorePopoverProps {
   topAlignmentEl?: HTMLElement
   onCloseClick?: () => void
   todayRange: DateRange
+  extraDateSpan: Dictionary
 }
 
 export class MorePopover extends DateComponent<MorePopoverProps> {
@@ -114,9 +116,9 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
       return {
         dateProfile: props.dateProfile,
         dateSpan: {
-          resourceId: '',
           allDay: true,
           range: { start: date, end: addDays(date, 1) },
+          ...props.extraDateSpan,
         },
         dayEl: rootEl,
         rect: {

packages/daygrid/src/Table.tsx

@@ -6,25 +6,23 @@ import {
   CssDimValue,
   createElement,
   PositionCache,
-  Ref,
   memoize,
   addDays,
   RefMap,
-  setRef,
   DateRange,
   NowTimer,
   DateMarker,
   DateProfile,
   Fragment,
+  Hit,
+  DayTableCell,
 } from '@fullcalendar/common'
 import { TableSeg, splitSegsByRow, splitInteractionByRow } from './TableSeg'
 import { TableRow } from './TableRow'
-import { TableCellModel } from './TableCell'
 
 export interface TableProps {
-  elRef?: Ref<HTMLDivElement>
   dateProfile: DateProfile
-  cells: TableCellModel[][] // cells-BY-ROW
+  cells: DayTableCell[][] // cells-BY-ROW
   renderRowIntro?: () => VNode
   colGroupNode: VNode
   tableMinWidth: CssDimValue
@@ -43,6 +41,7 @@ export interface TableProps {
   dayMaxEventRows: boolean | number
   headerAlignElRef?: RefObject<HTMLElement>
   forPrint: boolean
+  isHitComboAllowed?: (hit0: Hit, hit1: Hit) => boolean
 }
 
 export class Table extends DateComponent<TableProps> {
@@ -148,7 +147,15 @@ export class Table extends DateComponent<TableProps> {
 
   handleRootEl = (rootEl: HTMLElement | null) => {
     this.rootEl = rootEl
-    setRef(this.props.elRef, rootEl)
+
+    if (rootEl) {
+      this.context.registerInteractiveComponent(this, {
+        el: rootEl,
+        isHitComboAllowed: this.props.isHitComboAllowed
+      })
+    } else {
+      this.context.unregisterInteractiveComponent(this)
+    }
   }
 
   // Hit System
@@ -170,26 +177,29 @@ export class Table extends DateComponent<TableProps> {
     )
   }
 
-  positionToHit(leftPosition, topPosition) {
+  queryHit(positionLeft: number, positionTop: number): Hit {
     let { colPositions, rowPositions } = this
-    let col = colPositions.leftToIndex(leftPosition)
-    let row = rowPositions.topToIndex(topPosition)
+    let col = colPositions.leftToIndex(positionLeft)
+    let row = rowPositions.topToIndex(positionTop)
 
     if (row != null && col != null) {
+      let cell = this.props.cells[row][col]
+
       return {
-        row,
-        col,
+        dateProfile: this.props.dateProfile,
         dateSpan: {
           range: this.getCellRange(row, col),
           allDay: true,
+          ...cell.extraDateSpan,
         },
         dayEl: this.getCellEl(row, col),
-        relativeRect: {
+        rect: {
           left: colPositions.lefts[col],
           right: colPositions.rights[col],
           top: rowPositions.tops[row],
           bottom: rowPositions.bottoms[row],
         },
+        layer: 0,
       }
     }
 

packages/daygrid/src/TableCell.tsx

@@ -25,6 +25,7 @@ export interface TableCellProps {
   extraHookProps?: Dictionary
   extraDataAttrs?: Dictionary
   extraClassNames?: string[]
+  extraDateSpan?: Dictionary
   elRef?: Ref<HTMLTableCellElement>
   innerElRef?: Ref<HTMLDivElement>
   bgContent: ComponentChildren
@@ -39,14 +40,6 @@ export interface TableCellProps {
   singlePlacements: TableSegPlacement[]
 }
 
-export interface TableCellModel { // TODO: move somewhere else. combine with DayTableCell?
-  key: string
-  date: DateMarker
-  extraHookProps?: Dictionary
-  extraDataAttrs?: Dictionary
-  extraClassNames?: string[]
-}
-
 const DEFAULT_WEEK_NUM_FORMAT = createFormatter({ week: 'narrow' })
 
 export class TableCell extends DateComponent<TableCellProps> {
@@ -111,6 +104,7 @@ export class TableCell extends DateComponent<TableCellProps> {
                   singlePlacements={props.singlePlacements}
                   marginTop={props.moreMarginTop}
                   positionElRef={rootElRef}
+                  extraDateSpan={props.extraDateSpan}
                 />
               </div>
               <div className="fc-daygrid-day-bg">

packages/daygrid/src/TableCellMoreLink.tsx

@@ -5,6 +5,7 @@ import {
   BaseComponent,
   memoize,
   DateMarker,
+  Dictionary,
 } from '@fullcalendar/common'
 import { TableSegPlacement } from './event-placement'
 import { TableSeg } from './TableSeg'
@@ -14,6 +15,7 @@ export interface TableCellMoreLinkProps {
   singlePlacements: TableSegPlacement[]
   marginTop: number
   positionElRef: RefObject<HTMLElement>
+  extraDateSpan?: Dictionary
 }
 
 export class TableCellMoreLink extends BaseComponent<TableCellMoreLinkProps> {
@@ -29,6 +31,7 @@ export class TableCellMoreLink extends BaseComponent<TableCellMoreLinkProps> {
           allSegs={allSegs}
           hiddenSegs={hiddenSegs}
           positionElRef={props.positionElRef}
+          extraDateSpan={props.extraDateSpan}
         >
           {(rootElRef, classNames, innerElRef, innerContent, handleClick) => (
             <a

packages/daygrid/src/TableRow.tsx

@@ -16,9 +16,10 @@ import {
   createRef,
   buildEventRangeKey,
   sortEventSegs,
+  DayTableCell,
 } from '@fullcalendar/common'
 import { TableSeg, splitSegsByFirstCol } from './TableSeg'
-import { TableCell, TableCellModel } from './TableCell'
+import { TableCell } from './TableCell'
 import { TableListItemEvent } from './TableListItemEvent'
 import { TableBlockEvent } from './TableBlockEvent'
 import { computeFgSegPlacement, TableSegPlacement } from './event-placement'
@@ -27,7 +28,7 @@ import { hasListItemDisplay } from './event-rendering'
 // TODO: attach to window resize?
 
 export interface TableRowProps {
-  cells: TableCellModel[]
+  cells: DayTableCell[]
   renderIntro?: () => VNode
   businessHourSegs: TableSeg[]
   bgEventSegs: TableSeg[]
@@ -124,6 +125,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
               extraHookProps={cell.extraHookProps}
               extraDataAttrs={cell.extraDataAttrs}
               extraClassNames={cell.extraClassNames}
+              extraDateSpan={cell.extraDateSpan}
               moreMarginTop={moreMarginTops[col]}
               singlePlacements={singleColPlacements[col]}
               fgPaddingBottom={cellPaddingBottoms[col]}

packages/daygrid/src/event-placement.ts

@@ -8,8 +8,8 @@ import {
   EventRenderRange,
   intersectRanges,
   addDays,
+  DayTableCell,
 } from '@fullcalendar/common'
-import { TableCellModel } from './TableCell'
 import { TableSeg } from './TableSeg'
 
 export interface TableSegPlacement {
@@ -26,7 +26,7 @@ export function computeFgSegPlacement(
   dayMaxEventRows: boolean | number,
   eventInstanceHeights: { [instanceId: string]: number },
   maxContentHeight: number | null,
-  cells: TableCellModel[],
+  cells: DayTableCell[],
 ) {
   let hierarchy = new DayGridSegHierarchy()
   hierarchy.allowReslicing = true
@@ -132,7 +132,7 @@ export function computeFgSegPlacement(
 }
 
 // rects ordered by top coord, then left
-function placeRects(allRects: SegRect[], segs: TableSeg[], cells: TableCellModel[]) {
+function placeRects(allRects: SegRect[], segs: TableSeg[], cells: DayTableCell[]) {
   let rectsByEachCol = groupRectsByEachCol(allRects, cells.length)
   let singleColPlacements: TableSegPlacement[][] = []
   let multiColPlacements: TableSegPlacement[][] = []
@@ -216,7 +216,7 @@ function groupRectsByEachCol(rects: SegRect[], colCnt: number): SegRect[][] {
   return rectsByEachCol
 }
 
-function resliceSeg(seg: TableSeg, spanStart: number, spanEnd: number, cells: TableCellModel[]): TableSeg {
+function resliceSeg(seg: TableSeg, spanStart: number, spanEnd: number, cells: DayTableCell[]): TableSeg {
   if (seg.firstCol === spanStart && seg.lastCol === spanEnd - 1) {
     return seg
   }

packages/daygrid/src/main.ts

@@ -7,7 +7,6 @@ export { DayTable } from './DayTable'
 export { DayTableSlicer } from './DayTableSlicer'
 export { Table } from './Table'
 export { TableSeg } from './TableSeg'
-export { TableCellModel } from './TableCell'
 export { TableView } from './TableView'
 export { buildDayTableModel } from './DayTableView'
 export { DayTableView as DayGridView } // export as old name!

packages/timegrid/src/DayTimeCols.tsx

@@ -13,7 +13,6 @@ import {
   DayTableModel,
   DateEnv,
   DateMarker,
-  Hit,
   NowTimer,
   CssDimValue,
   Duration,
@@ -65,7 +64,6 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
         {(nowDate: DateMarker, todayRange: DateRange) => (
           <TimeCols
             ref={this.timeColsRef}
-            rootElRef={this.handleRootEl}
             {...this.slicer.sliceProps(props, dateProfile, null, context, dayRanges)}
             forPrint={props.forPrint}
             axis={props.axis}
@@ -88,35 +86,6 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
       </NowTimer>
     )
   }
-
-  handleRootEl = (rootEl: HTMLDivElement | null) => {
-    if (rootEl) {
-      this.context.registerInteractiveComponent(this, { el: rootEl })
-    } else {
-      this.context.unregisterInteractiveComponent(this)
-    }
-  }
-
-  queryHit(positionLeft: number, positionTop: number): Hit {
-    let rawHit = this.timeColsRef.current.positionToHit(positionLeft, positionTop)
-
-    if (rawHit) {
-      return {
-        dateProfile: this.props.dateProfile,
-        dateSpan: rawHit.dateSpan,
-        dayEl: rawHit.dayEl,
-        rect: {
-          left: rawHit.relativeRect.left,
-          right: rawHit.relativeRect.right,
-          top: rawHit.relativeRect.top,
-          bottom: rawHit.relativeRect.bottom,
-        },
-        layer: 0,
-      }
-    }
-
-    return null
-  }
 }
 
 export function buildDayRanges(dayTableModel: DayTableModel, dateProfile: DateProfile, dateEnv: DateEnv): DateRange[] {

packages/timegrid/src/TimeCol.tsx

@@ -1,7 +1,7 @@
 import {
   Ref, DateMarker, BaseComponent, createElement, EventSegUiInteractionState, Seg, getSegMeta,
   DateRange, Fragment, DayCellRoot, NowIndicatorRoot, BgEvent, renderFill,
-  DateProfile, config, buildEventRangeKey, sortEventSegs, SegInput, memoize, SegEntryGroup, SegEntry,
+  DateProfile, config, buildEventRangeKey, sortEventSegs, SegInput, memoize, SegEntryGroup, SegEntry, Dictionary,
 } from '@fullcalendar/common'
 import { TimeColMoreLink } from './TimeColMoreLink'
 import { TimeColsSeg } from './TimeColsSeg'
@@ -19,6 +19,7 @@ export interface TimeColProps {
   extraDataAttrs?: any
   extraHookProps?: any
   extraClassNames?: string[]
+  extraDateSpan?: Dictionary
   fgEventSegs: TimeColsSeg[]
   bgEventSegs: TimeColsSeg[]
   businessHourSegs: TimeColsSeg[]
@@ -201,6 +202,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
 
   // will already have eventMinHeight applied because segInputs already had it
   renderHiddenGroups(hiddenGroups: SegEntryGroup[], segs: TimeColsSeg[]) {
+    let { extraDateSpan } = this.props
     return hiddenGroups.map((hiddenGroup) => {
       let positionCss = this.computeSegTopBottomCss(hiddenGroup)
       return (
@@ -208,6 +210,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
           hiddenSegs={compileSegsFromEntries(hiddenGroup.entries, segs)}
           top={positionCss.top}
           bottom={positionCss.bottom}
+          extraDateSpan={extraDateSpan}
         />
       )
     })

packages/timegrid/src/TimeColMoreLink.tsx

@@ -1,5 +1,5 @@
 import {
-  createElement, MoreLinkContentArg, MoreLinkRoot, BaseComponent, createRef, setRef,
+  createElement, MoreLinkContentArg, MoreLinkRoot, BaseComponent, createRef, setRef, Dictionary,
 } from '@fullcalendar/common'
 import { TimeColsSeg } from './TimeColsSeg'
 
@@ -7,6 +7,7 @@ export interface TimeColMoreLinkProps {
   hiddenSegs: TimeColsSeg[]
   top: number
   bottom: number
+  extraDateSpan?: Dictionary
 }
 
 export class TimeColMoreLink extends BaseComponent<TimeColMoreLinkProps> {
@@ -20,6 +21,7 @@ export class TimeColMoreLink extends BaseComponent<TimeColMoreLinkProps> {
         hiddenSegs={props.hiddenSegs}
         positionElRef={this.rootElRef}
         defaultContent={renderMoreLinkInner}
+        extraDateSpan={props.extraDateSpan}
       >
         {(rootElRef, classNames, innerElRef, innerContent, handleClick) => (
           <a

packages/timegrid/src/TimeCols.tsx

@@ -1,10 +1,9 @@
 import {
-  createElement, VNode, Ref,
+  createElement, VNode,
   addDurations,
   multiplyDuration,
   wholeDivideDurations,
   DateMarker,
-  BaseComponent,
   EventSegUiInteractionState,
   memoize,
   CssDimValue,
@@ -14,8 +13,10 @@ import {
   DateRange,
   Duration,
   DateProfile,
+  DayTableCell,
+  Hit,
+  DateComponent,
 } from '@fullcalendar/common'
-import { TableCellModel } from '@fullcalendar/daygrid' // TODO: good to use this interface?
 import { TimeColsSlats } from './TimeColsSlats'
 import { TimeSlatMeta } from './time-slat-meta'
 import { TimeColsContent } from './TimeColsContent'
@@ -23,7 +24,7 @@ import { TimeColsSlatsCoords } from './TimeColsSlatsCoords'
 import { TimeColsSeg } from './TimeColsSeg'
 
 export interface TimeColsProps {
-  cells: TableCellModel[]
+  cells: DayTableCell[]
   dateProfile: DateProfile
   slotDuration: Duration
   nowDate: DateMarker
@@ -35,7 +36,6 @@ export interface TimeColsProps {
   eventSelection: string
   eventDrag: EventSegUiInteractionState | null
   eventResize: EventSegUiInteractionState | null
-  rootElRef?: Ref<HTMLDivElement>
   tableColGroupNode: VNode
   tableMinWidth: CssDimValue
   clientWidth: number | null
@@ -47,6 +47,7 @@ export interface TimeColsProps {
   axis: boolean
   slatMetas: TimeSlatMeta[]
   onSlatCoords?: (slatCoords: TimeColsSlatsCoords) => void
+  isHitComboAllowed?: (hit0: Hit, hit1: Hit) => boolean
 }
 
 interface TimeColsState {
@@ -56,7 +57,7 @@ interface TimeColsState {
 /* A component that renders one or more columns of vertical time slots
 ----------------------------------------------------------------------------------------------------------------------*/
 
-export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
+export class TimeCols extends DateComponent<TimeColsProps, TimeColsState> {
   private processSlotOptions = memoize(processSlotOptions)
   private scrollResponder: ScrollResponder
   private colCoords: PositionCache
@@ -71,7 +72,7 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
     return (
       <div
         className="fc-timegrid-body"
-        ref={props.rootElRef}
+        ref={this.handleRootEl}
         style={{
           // these props are important to give this wrapper correct dimensions for interactions
           // TODO: if we set it here, can we avoid giving to inner tables?
@@ -114,6 +115,17 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
     )
   }
 
+  handleRootEl = (el: HTMLElement | null) => {
+    if (el) {
+      this.context.registerInteractiveComponent(this, {
+        el,
+        isHitComboAllowed: this.props.isHitComboAllowed,
+      })
+    } else {
+      this.context.unregisterInteractiveComponent(this)
+    }
+  }
+
   componentDidMount() {
     this.scrollResponder = this.context.createScrollResponder(this.handleScrollRequest)
   }
@@ -159,7 +171,7 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
     }
   }
 
-  positionToHit(positionLeft, positionTop) {
+  queryHit(positionLeft: number, positionTop: number): Hit {
     let { dateEnv, options } = this.context
     let { colCoords } = this
     let { dateProfile } = this.props
@@ -170,6 +182,7 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
     let slatIndex = slatCoords.positions.topToIndex(positionTop)
 
     if (colIndex != null && slatIndex != null) {
+      let cell = this.props.cells[colIndex]
       let slatTop = slatCoords.positions.tops[slatIndex]
       let slatHeight = slatCoords.positions.getHeight(slatIndex)
       let partial = (positionTop - slatTop) / slatHeight // floating point number between 0 and 1
@@ -186,18 +199,20 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
       let end = dateEnv.add(start, snapDuration)
 
       return {
-        col: colIndex,
+        dateProfile,
         dateSpan: {
           range: { start, end },
           allDay: false,
+          ...cell.extraDateSpan,
         },
         dayEl: colCoords.els[colIndex],
-        relativeRect: {
+        rect: {
           left: colCoords.lefts[colIndex],
           right: colCoords.rights[colIndex],
           top: slatTop,
           bottom: slatTop + slatHeight,
         },
+        layer: 0,
       }
     }
 

packages/timegrid/src/TimeColsContent.tsx

@@ -11,15 +11,15 @@ import {
   DateRange,
   NowIndicatorRoot,
   DateProfile,
+  DayTableCell,
 } from '@fullcalendar/common'
-import { TableCellModel } from '@fullcalendar/daygrid' // TODO: good to use this interface?
 import { TimeColsSeg, splitSegsByCol, splitInteractionByCol } from './TimeColsSeg'
 import { TimeColsSlatsCoords } from './TimeColsSlatsCoords'
 import { TimeCol } from './TimeCol'
 
 export interface TimeColsContentProps {
   axis: boolean
-  cells: TableCellModel[]
+  cells: DayTableCell[]
   dateProfile: DateProfile
   nowDate: DateMarker
   todayRange: DateRange
@@ -108,6 +108,7 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
                   extraHookProps={cell.extraHookProps}
                   extraDataAttrs={cell.extraDataAttrs}
                   extraClassNames={cell.extraClassNames}
+                  extraDateSpan={cell.extraDateSpan}
                   fgEventSegs={fgEventSegsByRow[i]}
                   bgEventSegs={bgEventSegsByRow[i]}
                   businessHourSegs={businessHourSegsByRow[i]}
@@ -154,6 +155,6 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
   }
 }
 
-function collectCellEls(elMap: { [key: string]: HTMLElement }, cells: TableCellModel[]) {
+function collectCellEls(elMap: { [key: string]: HTMLElement }, cells: DayTableCell[]) {
   return cells.map((cell) => elMap[cell.key])
 }