use new navlink technique

packages-premium

@@ -1 +1 @@
-Subproject commit f2307d5ba6642f6d2dae18edf633da27217a6dc5
+Subproject commit 5b00233da7c6c68647028e7344195c9e4b2d770f

packages/bootstrap/src/main.scss

@@ -3,7 +3,7 @@
   text-decoration: none;
 }
 
-.fc.fc-bootstrap a[data-goto]:hover {
+.fc.fc-bootstrap a[data-navlink]:hover {
   text-decoration: underline;
 }
 

packages/core/src/CalendarComponent.tsx

@@ -42,7 +42,7 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
   private buildToolbarProps = memoize(buildToolbarProps)
   private reportClassNames = memoize(reportClassNames)
   private reportHeight = memoize(reportHeight)
-  private handleNavLinkClick = buildDelegationHandler('a[data-goto]', this._handleNavLinkClick.bind(this))
+  private handleNavLinkClick = buildDelegationHandler('a[data-navlink]', this._handleNavLinkClick.bind(this))
   private headerRef = createRef<Toolbar>()
   private footerRef = createRef<Toolbar>()
   private viewRef = createRef<View>()
@@ -157,11 +157,11 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
   _handleNavLinkClick(ev: UIEvent, anchorEl: HTMLElement) {
     let { dateEnv, calendar } = this.context
 
-    let gotoOptions: any = anchorEl.getAttribute('data-goto')
-    gotoOptions = gotoOptions ? JSON.parse(gotoOptions) : {}
+    let navLinkOptions: any = anchorEl.getAttribute('data-navlink')
+    navLinkOptions = navLinkOptions ? JSON.parse(navLinkOptions) : {}
 
-    let dateMarker = dateEnv.createMarker(gotoOptions.date)
-    let viewType = gotoOptions.type
+    let dateMarker = dateEnv.createMarker(navLinkOptions.date)
+    let viewType = navLinkOptions.type
 
     // property like "navLinkDayClick". might be a string or a function
     let customAction = calendar.viewOpt('navLink' + capitaliseFirstLetter(viewType) + 'Click')

packages/core/src/common/GotoAnchor.tsx

@@ -1,59 +0,0 @@
-import { h, ComponentChildren } from '../vdom'
-import { BaseComponent } from '../vdom-util'
-import ComponentContext from '../component/ComponentContext'
-import { __assign } from 'tslib'
-
-export interface GotoAnchorProps {
-  navLinks: any
-  gotoOptions: any
-  extraAttrs?: object
-  children: ComponentChildren
-}
-
-export default class GotoAnchor extends BaseComponent<GotoAnchorProps> {
-
-  // Generates HTML for an anchor to another view into the calendar.
-  // Will either generate an <a> tag or a non-clickable <span> tag, depending on enabled settings.
-  // `gotoOptions` can either be a DateMarker, or an object with the form:
-  // { date, type, forceOff }
-  // `type` is a view-type like "day" or "week". default value is "day".
-  // `attrs` and `innerHtml` are use to generate the rest of the HTML tag.
-  render(props: GotoAnchorProps, state: {}, context: ComponentContext) {
-    let { gotoOptions } = props
-    let date
-    let type
-    let forceOff
-    let finalOptions
-
-    if (gotoOptions instanceof Date) {
-      date = gotoOptions // a single date-like input
-    } else {
-      date = gotoOptions.date
-      type = gotoOptions.type
-      forceOff = gotoOptions.forceOff
-    }
-
-    finalOptions = { // for serialization into the link
-      date: context.dateEnv.formatIso(date, { omitTime: true }),
-      type: type || 'day'
-    }
-
-    let attrs = {} as any
-    let children = props.children
-
-    if (props.extraAttrs) {
-      __assign(attrs, props.extraAttrs)
-    }
-
-    if (!forceOff && props.navLinks) {
-      return (
-        <a {...attrs} data-goto={JSON.stringify(finalOptions)}>{children}</a>
-      )
-    } else {
-      return (
-        <span {...attrs}>{children}</span>
-      )
-    }
-  }
-
-}

packages/core/src/common/TableDateCell.tsx

@@ -1,6 +1,5 @@
 import { rangeContainsMarker, DateRange } from '../datelib/date-range'
 import { getDayClassNames, getDayMeta } from '../component/date-rendering'
-import GotoAnchor from './GotoAnchor'
 import { DateMarker } from '../datelib/marker'
 import { DateProfile } from '../DateProfileGenerator'
 import ComponentContext from '../component/ComponentContext'
@@ -9,6 +8,7 @@ import { __assign } from 'tslib'
 import { DateFormatter, formatDayString } from '../datelib/formatting'
 import { BaseComponent } from '../vdom-util'
 import { RenderHook } from './render-hook'
+import { buildNavLinkData } from './nav-link'
 
 
 export interface TableDateCellProps {
@@ -69,16 +69,18 @@ export default class TableDateCell extends BaseComponent<TableDateCellProps> { /
     }
 
     // if colCnt is 1, we are already in a day-view and don't need a navlink
+    let navLinkData = (options.navLinks && isDateValid && isDateDistinct && props.colCnt > 1)
+      ? buildNavLinkData(date)
+      : null
 
     return (
       <RenderHook name='dateHeader' mountProps={mountProps} dynamicProps={dynamicProps}>
         {(rootElRef, customClassNames, innerElRef, innerContent) => (
           <th class={classNames.concat(customClassNames).join(' ')} {...attrs} ref={rootElRef}>
             {isDateValid &&
-              <GotoAnchor
-                navLinks={options.navLinks}
-                gotoOptions={{ date, forceOff: isDateValid && (!isDateDistinct || props.colCnt === 1) }}
-              >{innerText}</GotoAnchor>
+              <a data-navlink={navLinkData}>
+                {innerText}
+              </a>
             }
             {innerContent &&
               <div class='date-header-misc' ref={innerElRef}>{innerContent}</div>

packages/core/src/common/nav-link.ts

@@ -0,0 +1,10 @@
+import { formatDayString } from '../datelib/formatting'
+import { DateMarker } from '../datelib/marker'
+
+
+export function buildNavLinkData(date: DateMarker, type: string = 'day') {
+  return JSON.stringify({
+    date: formatDayString(date),
+    type
+  })
+}

packages/core/src/component/DateComponent.ts

@@ -115,7 +115,7 @@ export default abstract class DateComponent<Props={}, State={}> extends BaseComp
 
     return (!segEl || segEl.classList.contains('fc-mirror')) &&
       !elementClosest(el, '.fc-more') && // a "more.." link
-      !elementClosest(el, 'a[data-goto]') && // a clickable nav link
+      !elementClosest(el, 'a[data-navlink]') && // a clickable nav link
       !this.isInPopover(el)
   }
 

packages/core/src/main.ts

@@ -64,7 +64,7 @@ export { EventStore, filterEventStoreDefs, createEmptyEventStore, mergeEventStor
 export { EventUiHash, EventUi, processScopedUiProps, combineEventUis } from './component/event-ui'
 export { default as Splitter, SplittableProps } from './component/event-splitting'
 export { getDayClassNames, getDateMeta, getDayMeta, getSlatClassNames, getDateTimeClassNames, DateMeta } from './component/date-rendering'
-export { default as GotoAnchor } from './common/GotoAnchor'
+export { buildNavLinkData } from './common/nav-link'
 
 export {
   preventDefault,

packages/core/src/styles/_resets.scss

@@ -30,11 +30,11 @@
   /* Internal Nav Links
   --------------------------------------------------------------------------------------------------*/
 
-  a[data-goto] {
+  a[data-navlink] {
     cursor: pointer;
   }
 
-  a[data-goto]:hover {
+  a[data-navlink]:hover {
     text-decoration: underline;
   }
 

packages/daygrid/src/TableCell.tsx

@@ -6,11 +6,11 @@ import {
   DateMarker,
   DateComponent,
   ComponentContext,
-  GotoAnchor,
   CssDimValue,
   DateProfile,
   DateRange,
   DayRoot,
+  buildNavLinkData,
 } from '@fullcalendar/core'
 
 
@@ -82,22 +82,16 @@ export default class TableCell extends DateComponent<TableCellProps> {
             <div class='fc-daygrid-day-inner' ref={props.innerElRef /* different from hook system! RENAME */}>
               {props.showWeekNumber &&
                 <div class='fc-daygrid-week-number'>
-                  <GotoAnchor
-                    navLinks={options.navLinks}
-                    gotoOptions={{ date, type: 'week' }}
-                    extraAttrs={{
-                      'data-fc-width-content': 1
-                    }}
-                  >{dateEnv.format(date, WEEK_NUM_FORMAT)}</GotoAnchor>
+                  <a data-navlink={options.navLinks ? buildNavLinkData(date, 'week') : null} data-fc-width-content={1}>
+                    {dateEnv.format(date, WEEK_NUM_FORMAT)}
+                  </a>
                 </div>
               }
               {props.showDayNumber &&
                 <div class='fc-daygrid-day-header'>
-                  <GotoAnchor
-                    navLinks={options.navLinks}
-                    gotoOptions={date}
-                    extraAttrs={{ 'class': 'fc-day-number' }}
-                  >{dateEnv.format(date, DAY_NUM_FORMAT)}</GotoAnchor>
+                  <a data-navlink={options.navLinks ? buildNavLinkData(date) : null} className='fc-day-number'>
+                    {dateEnv.format(date, DAY_NUM_FORMAT)}
+                  </a>
                 </div>
               }
               {innerContent &&

packages/list/src/ListViewHeaderRow.tsx

@@ -1,5 +1,5 @@
 import {
-  BaseComponent, DateMarker, createFormatter, ComponentContext, h, GotoAnchor, DateRange, DayRoot
+  BaseComponent, DateMarker, createFormatter, ComponentContext, h, DateRange, DayRoot, buildNavLinkData
 } from '@fullcalendar/core'
 
 
@@ -16,6 +16,7 @@ export default class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowPr
     let { dayDate } = props
     let mainFormat = createFormatter(options.listDayFormat) // TODO: cache
     let altFormat = createFormatter(options.listDayAltFormat) // TODO: cache
+    let navLinkData = options.navLinks ? buildNavLinkData(dayDate) : null
 
     return (
       <DayRoot date={dayDate} todayRange={props.todayRange}>
@@ -27,21 +28,17 @@ export default class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowPr
           >
             <td colSpan={3} className={theme.getClass('tableCellShaded')}>
               {mainFormat &&
-                <GotoAnchor
-                  navLinks={options.navLinks}
-                  gotoOptions={dayDate}
-                  extraAttrs={{ 'class': 'fc-list-heading-main' }}
-                >{dateEnv.format(dayDate, mainFormat)}</GotoAnchor>
+                <a data-navlink={navLinkData} className='fc-list-heading-main'>
+                  {dateEnv.format(dayDate, mainFormat)}
+                </a>
               }
               {innerContent &&
                 <div class='fc-list-heading-misc' ref={innerElRef}>{innerContent}</div>
               }
               {altFormat &&
-                <GotoAnchor
-                  navLinks={options.navLinks}
-                  gotoOptions={dayDate}
-                  extraAttrs={{ 'class': 'fc-list-heading-alt' }}
-                >{dateEnv.format(dayDate, altFormat)}</GotoAnchor>
+                <a data-navlink={navLinkData} className='fc-list-heading-alt'>
+                  {dateEnv.format(dayDate, altFormat)}
+                </a>
               }
             </td>
           </tr>

packages/timegrid/src/TimeColsView.tsx

@@ -3,13 +3,13 @@ import {
   View,
   createFormatter, diffDays,
   getViewClassNames,
-  GotoAnchor,
   SimpleScrollGridSection,
   VNode,
   SimpleScrollGrid,
   ChunkContentCallbackArgs,
   ScrollGridSectionConfig,
-  BaseComponent
+  BaseComponent,
+  buildNavLinkData
 } from '@fullcalendar/core'
 import AllDaySplitter from './AllDaySplitter'
 import { TimeSlatMeta, TimeColsAxisCell } from './TimeColsSlats'
@@ -214,11 +214,13 @@ export default abstract class TimeColsView extends View {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  // Generates the HTML that will go before the day-of week header cells
   renderHeadAxis = () => {
     let { dateEnv, options } = this.context
     let range = this.props.dateProfile.renderRange
     let dayCnt = diffDays(range.start, range.end)
+    let navLinkData = (options.navLinks && dayCnt === 1) // only do in day views (to avoid doing in week views that dont need it)
+      ? buildNavLinkData(range.start, 'week')
+      : null
     let weekText
 
     if (options.weekNumbers) {
@@ -227,11 +229,9 @@ export default abstract class TimeColsView extends View {
       return (
         <th class={'fc-axis shrink fc-week-number'}>
           <div data-fc-width-all={1}>
-            <GotoAnchor
-              navLinks={options.navLinks}
-              gotoOptions={{ date: range.start, type: 'week', forceOff: dayCnt > 1 }}
-              extraAttrs={{ 'data-fc-width-content': 1 }}
-            >{weekText}</GotoAnchor>
+            <a data-navlink={navLinkData} data-fc-width-content={1}>
+              {weekText}
+            </a>
           </div>
         </th>
       )