list view should use dayHeader* hooks

packages/core/src/common/TableDateCell.tsx

@@ -23,7 +23,7 @@ export interface TableDateCellProps {
   extraHookProps?: object
 }
 
-interface HookProps extends DateMeta {
+export interface DateHeaderCellHookProps extends DateMeta { // is used publicly as the standard header cell. TODO: move
   date: Date
   view: ViewApi
   text: string
@@ -51,7 +51,7 @@ export default class TableDateCell extends BaseComponent<TableDateCellProps> { /
       ? buildNavLinkData(date)
       : null
 
-    let hookProps: HookProps = {
+    let hookProps: DateHeaderCellHookProps = {
       date: dateEnv.toDate(date),
       view: context.view,
       ...props.extraHookProps,
@@ -111,7 +111,7 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
 
     let text = dateEnv.format(date, props.dayHeaderFormat)
 
-    let hookProps: HookProps = {
+    let hookProps: DateHeaderCellHookProps = {
       date,
       ...dateMeta,
       view: context.view,
@@ -137,7 +137,7 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
 }
 
 
-function renderInner(hookProps: HookProps) {
+function renderInner(hookProps: DateHeaderCellHookProps) {
   if (!hookProps.isDisabled) {
     return (
       <a data-navlink={hookProps.navLinkData}>

packages/core/src/main.ts

@@ -143,7 +143,7 @@ export { CalendarComponentProps } from './CalendarComponent'
 
 export { default as DayHeader } from './common/DayHeader'
 export { computeFallbackHeaderFormat } from './common/table-utils'
-export { default as TableDateCell, TableDowCell } from './common/TableDateCell'
+export { default as TableDateCell, TableDowCell, DateHeaderCellHookProps } from './common/TableDateCell'
 
 export { default as DaySeries } from './common/DaySeriesModel'
 

packages/list/src/ListViewHeaderRow.tsx

@@ -1,5 +1,6 @@
 import {
-  BaseComponent, DateMarker, createFormatter, ComponentContext, h, DateRange, DayCellRoot, DayCellHookProps, DayCellContent
+  BaseComponent, DateMarker, createFormatter, ComponentContext, h, DateRange, getDateMeta,
+  RenderHook, buildNavLinkData, DateHeaderCellHookProps, getDayClassNames, formatDayString
 } from '@fullcalendar/core'
 
 
@@ -8,7 +9,7 @@ export interface ListViewHeaderRowProps {
   todayRange: DateRange
 }
 
-interface HookProps extends DayCellHookProps { // doesn't enforce much since DayCellHookProps allow extra props
+interface HookProps extends DateHeaderCellHookProps { // doesn't enforce much since DayCellHookProps allow extra props
   text: string
   sideText: string
 }
@@ -16,32 +17,48 @@ interface HookProps extends DayCellHookProps { // doesn't enforce much since Day
 
 export default class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowProps> {
 
+
   render(props: ListViewHeaderRowProps, state: {}, context: ComponentContext) {
     let { theme, dateEnv, options } = context
     let { dayDate } = props
+    let dayMeta = getDateMeta(dayDate, props.todayRange)
     let mainFormat = createFormatter(options.listDayFormat) // TODO: cache
     let sideFormat = createFormatter(options.listDaySideFormat) // TODO: cache
     let text = mainFormat ? dateEnv.format(dayDate, mainFormat) : '' // will ever be falsy?
     let sideText = sideFormat ? dateEnv.format(dayDate, sideFormat) : '' // will ever be falsy? also, BAD NAME "alt"
-    let extraHookProps = { text, sideText }
+
+    let navLinkData = options.navLinks
+      ? buildNavLinkData(dayDate)
+      : null
+
+    let hookProps: HookProps = {
+      date: dateEnv.toDate(dayDate),
+      view: context.view,
+      text,
+      sideText,
+      navLinkData,
+      ...dayMeta
+    }
+
+    let classNames = [ 'fc-list-day' ].concat(
+      getDayClassNames(dayMeta, context.theme)
+    )
+
+    // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)
     return (
-      <DayCellRoot date={dayDate} todayRange={props.todayRange} extraHookProps={extraHookProps}>
-        {(rootElRef, classNames, dataAttrs) => (
+      <RenderHook name='dayHeader' hookProps={hookProps} defaultContent={renderInnerContent}>
+        {(rootElRef, customClassNames, innerElRef, innerContent) => (
           <tr
             ref={rootElRef}
-            className={[ 'fc-list-day' ].concat(classNames).join(' ')}
-            {...dataAttrs}
+            className={classNames.concat(customClassNames).join(' ')}
+            data-date={formatDayString(dayDate)}
           >
-            <DayCellContent date={dayDate} todayRange={props.todayRange} extraHookProps={extraHookProps} defaultContent={renderInnerContent}>
-              {(innerElRef, innerContent) => (
-                <td colSpan={3} className={theme.getClass('tableCellShaded')} ref={innerElRef}>
-                  {innerContent}
-                </td>
-              )}
-            </DayCellContent>
+            <th colSpan={3} className={theme.getClass('tableCellShaded')} ref={innerElRef}>
+              {innerContent}
+            </th>
           </tr>
         )}
-      </DayCellRoot>
+      </RenderHook>
     )
   }
 

packages/list/src/main.scss

@@ -41,7 +41,7 @@
   font-weight: bold;
 }
 
-.fc-theme-standard .fc-list-day td {
+.fc-theme-standard .fc-list-day th {
   background: $fc-theme-standard-muted-bg-color;
   background: var(--fc-theme-standard-muted-bg-color, $fc-theme-standard-muted-bg-color);
 }