give clientWidth to Table

packages/daygrid/src/DayTable.tsx

@@ -12,7 +12,8 @@ import {
   Slicer,
   Hit,
   ComponentContext,
-  RefObject
+  RefObject,
+  CssDimValue
 } from '@fullcalendar/core'
 import Table, { TableSeg  } from './Table'
 
@@ -38,6 +39,7 @@ export interface DayTableProps {
   eventLimit: boolean | number
   vGrow: boolean
   headerAlignElRef?: RefObject<HTMLElement> // for more popover alignment
+  clientWidth: CssDimValue
 }
 
 export default class DayTable extends DateComponent<DayTableProps, ComponentContext> {
@@ -66,6 +68,7 @@ export default class DayTable extends DateComponent<DayTableProps, ComponentCont
         eventLimit={props.eventLimit}
         vGrow={props.vGrow}
         headerAlignElRef={props.headerAlignElRef}
+        clientWidth={props.clientWidth}
       />
     )
   }

packages/daygrid/src/DayTableView.tsx

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

packages/daygrid/src/Table.tsx

@@ -108,6 +108,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
           rowElRefs={this.rowElRefs}
           cellElRefs={this.cellElRefs}
           vGrow={props.vGrow}
+          clientWidth={props.clientWidth}
         />
         {this.renderPopover()}
       </Fragment>

packages/daygrid/src/TableSkeleton.tsx

@@ -4,7 +4,8 @@ import {
   DateMarker,
   BaseComponent,
   RefMap,
-  Ref
+  Ref,
+  CssDimValue
 } from '@fullcalendar/core'
 import DayBgRow from './DayBgRow'
 import TableSkeletonDayCell from './TableSkeletonDayCell'
@@ -29,6 +30,7 @@ export interface TableBaseProps {
   cellWeekNumbersVisible: boolean // display week numbers in day cell?
   colGroupNode: VNode
   vGrow: boolean
+  clientWidth: CssDimValue
 }
 
 export interface CellModel {
@@ -51,7 +53,7 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
     }
 
     return (
-      <div class={'fc-day-grid' + (props.vGrow ? ' vgrow' : '')} ref={props.rootElRef}>
+      <div class={'fc-day-grid' + (props.vGrow ? ' vgrow' : '')} ref={props.rootElRef} style={{ width: props.clientWidth }}>
         {rowNodes}
       </div>
     )

packages/timegrid/src/DayTimeColsView.tsx

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