className and styling tweaks. fix all-day alignment

packages-premium

@@ -1 +1 @@
-Subproject commit 858a9ebfbf2eee21d29c265e7d8be2e3c0ed4fed
+Subproject commit d953ecbb278beb717d7fb7811f40c975bbea7a3a

packages/core/src/scrollgrid/util.tsx

@@ -87,7 +87,7 @@ export function renderChunkContent(sectionConfig: SectionConfig, chunkConfig: Ch
   let content: VNode = typeof chunkConfig.content === 'function' ?
     chunkConfig.content(arg) :
     h('table', {
-      className: sectionConfig.syncRowHeights ? 'fc-scrollgrid-height-sync' : '',
+      className: sectionConfig.syncRowHeights ? 'fc-scrollgrid-sync-table' : '',
       style: {
         minWidth: arg.tableMinWidth, // because colMinWidths arent enough
         width: arg.clientWidth,

packages/core/src/util/misc.ts

@@ -317,14 +317,14 @@ export function diffDates(date0: DateMarker, date1: DateMarker, dateEnv: DateEnv
 ----------------------------------------------------------------------------------------------------------------------*/
 
 export function computeSmallestCellWidth(cellEl: HTMLElement) {
-  let allWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-block')
-  let contentWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-span')
+  let allWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-frame')
+  let contentWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-cushion')
 
   if (!allWidthEl) {
-    throw new Error('needs fc-scrollgrid-shrink-block className') // TODO: use const
+    throw new Error('needs fc-scrollgrid-shrink-frame className') // TODO: use const
   }
   if (!contentWidthEl) {
-    throw new Error('needs fc-scrollgrid-shrink-span className')
+    throw new Error('needs fc-scrollgrid-shrink-cushion className')
   }
 
   return cellEl.getBoundingClientRect().width - allWidthEl.getBoundingClientRect().width + // the cell padding+border

packages/daygrid/src/Table.tsx

@@ -93,11 +93,14 @@ export default class Table extends DateComponent<TableProps, TableState> {
         minWidth: props.tableMinWidth
       }}>
         <NowTimer unit='day' content={(nowDate: DateMarker, todayRange: DateRange) => [
-          <table style={{
-            width: props.clientWidth,
-            minWidth: props.tableMinWidth,
-            height: props.vGrowRows ? props.clientHeight : ''
-          }}>
+          <table
+            className='fc-scrollgrid-sync-table'
+            style={{
+              width: props.clientWidth,
+              minWidth: props.tableMinWidth,
+              height: props.vGrowRows ? props.clientHeight : ''
+            }}
+          >
             {props.colGroupNode}
             <tbody>
               {props.cells.map((cells, row) => (

packages/daygrid/src/TableCell.tsx

@@ -83,7 +83,7 @@ export default class TableCell extends DateComponent<TableCellProps> {
             {...rootDataAttrs}
             {...props.extraDataAttrs}
           >
-            <div class='fc-daygrid-day-inner' ref={props.innerElRef /* different from hook system! RENAME */}>
+            <div class='fc-daygrid-day-inner fc-scrollgrid-sync-inner' ref={props.innerElRef /* different from hook system! RENAME */}>
               {props.showWeekNumber &&
                 <WeekNumberRoot date={date} defaultFormat={DEFAULT_WEEK_NUM_FORMAT}>
                   {(rootElRef, classNames, innerElRef, innerContent) => (

packages/daygrid/src/TableRow.tsx

@@ -43,6 +43,7 @@ export interface TableRowProps {
   todayRange: DateRange
   enableNumbers: boolean
   buildMoreLinkText: (num: number) => string
+  innerHeight?: number
 }
 
 export interface RowMoreLinkArg extends MoreLinkArg {

packages/timegrid/src/TimeColsSlats.tsx

@@ -212,8 +212,8 @@ export function TimeColsAxisCell(props: TimeSlatMeta) {
             <RenderHook name='slotLabel' mountProps={mountProps} dynamicProps={dynamicProps} defaultInnerContent={renderInnerContent}>
               {(rootElRef, customClassNames, innerElRef, innerContent) => (
                 <td ref={rootElRef} class={classNames.concat(customClassNames).join(' ')} data-time={props.isoTimeStr}>
-                  <div class='fc-scrollgrid-shrink-block'>
-                    <span className='fc-timegrid-slot-axis-inner fc-scrollgrid-shrink-span' ref={innerElRef}>
+                  <div class='fc-scrollgrid-shrink-frame'>
+                    <span className='fc-timegrid-slot-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                       {innerContent}
                     </span>
                   </div>

packages/timegrid/src/TimeColsView.tsx

@@ -139,9 +139,12 @@ export default abstract class TimeColsView extends View {
       sections.push({
         key: 'all-day',
         type: 'body',
+        syncRowHeights: true,
         chunks: [
           {
-            rowContent: <tr>{this.renderTableRowAxis()}</tr>,
+            rowContent: (contentArg: ChunkContentCallbackArgs) => (
+              <tr>{this.renderTableRowAxis(contentArg.rowSyncHeights[0])}</tr>
+            ),
           },
           {
             content: allDayContent
@@ -236,8 +239,8 @@ export default abstract class TimeColsView extends View {
               'fc-scrollgrid-shrink',
               'fc-week-number' // TODO: make part of WeekNumberRoot
             ].concat(classNames).join(' ')}>
-              <div class='fc-scrollgrid-shrink-block'>
-                <a class='fc-timegrid-view-axis-inner fc-scrollgrid-shrink-span' data-navlink={navLinkData} ref={innerElRef}>
+              <div class='fc-timegrid-view-axis-frame fc-scrollgrid-shrink-frame'>
+                <a class='fc-timegrid-view-axis-cushion fc-scrollgrid-shrink-cushion' data-navlink={navLinkData} ref={innerElRef}>
                   {innerContent}
                 </a>
               </div>
@@ -257,7 +260,9 @@ export default abstract class TimeColsView extends View {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  renderTableRowAxis = () => {
+  // only a one-way height sync. we don't send the axis inner-content height to the DayGrid,
+  // but DayGrid still needs to have classNames on inner elements in order to measure.
+  renderTableRowAxis = (rowHeight?: number) => {
     let innerProps = { view: this.context.view }
 
     return (
@@ -268,8 +273,8 @@ export default abstract class TimeColsView extends View {
             'fc-scrollgrid-shrink',
             'fc-allday' // TODO: have RenderHook supply this?
           ].concat(classNames).join(' ')}>
-            <div class='fc-scrollgrid-shrink-block'>
-              <span class='fc-timegrid-view-axis-inner fc-scrollgrid-shrink-span' ref={innerElRef}>
+            <div class='fc-timegrid-view-axis-frame fc-scrollgrid-shrink-frame' style={{ height: rowHeight }}>
+              <span class='fc-timegrid-view-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                 {innerContent}
               </span>
             </div>

packages/timegrid/src/styles/_time-grid.scss

@@ -40,7 +40,7 @@
 // SLATS (lines that run horizontally)
 
 .fc-timegrid-slot { // a <td>
-  height: 1.5em;
+  height: 1.5em; // TODO: move to the 'frame' possibly
   border-bottom: 0 !important;
     /* each cell is responsible for its top border */
     /* is !important because competing with theme declarations */
@@ -50,13 +50,17 @@
   border-top-style: dotted !important;
 }
 
-.fc .fc-timegrid-view-axis,
+.fc .fc-timegrid-view-axis-frame {
+  display: flex;
+  align-items: center;
+}
+
 .fc .fc-timegrid-slot-axis {
   vertical-align: middle;
 }
 
-.fc-timegrid-view-axis-inner,
-.fc-timegrid-slot-axis-inner {
+.fc-timegrid-view-axis-cushion,
+.fc-timegrid-slot-axis-cushion {
   white-space: nowrap;
   padding: 0 4px;
 }