DayHeader, utils, exports

src/agenda/AgendaView.ts

@@ -4,7 +4,7 @@ import DayGrid from '../basic/DayGrid'
 import DateProfileGenerator, { DateProfile } from '../DateProfileGenerator'
 import { ComponentContext } from '../component/Component'
 import { ViewSpec } from '../structs/view-spec'
-import DayTableHeader from '../basic/DayTableHeader'
+import DayHeader from '../common/DayHeader'
 import { StandardDateComponentProps } from '../component/StandardDateComponent'
 import { assignTo } from '../util/object'
 import reselector from '../util/reselector'
@@ -14,7 +14,7 @@ import TimeGridSlicer from './TimeGridSlicer'
 
 export default class AgendaView extends AbstractAgendaView {
 
-  header: DayTableHeader
+  header: DayHeader
 
   constructor(
     context: ComponentContext,
@@ -25,7 +25,7 @@ export default class AgendaView extends AbstractAgendaView {
     super(context, viewSpec, dateProfileGenerator, parentEl, TimeGrid, DayGrid)
 
     if (this.opt('columnHeader')) {
-      this.header = new DayTableHeader(
+      this.header = new DayHeader(
         this.context,
         this.el.querySelector('.fc-head-container')
       )

src/basic/BasicView.ts

@@ -20,7 +20,7 @@ import { ComponentContext } from '../component/Component'
 import { ViewSpec } from '../structs/view-spec'
 import DateProfileGenerator, { DateProfile } from '../DateProfileGenerator'
 import reselector from '../util/reselector'
-import DayTableHeader from './DayTableHeader'
+import DayHeader from '../common/DayHeader'
 import DayGridSlicer from './DayGridSlicer'
 
 const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
@@ -34,7 +34,7 @@ const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
 export default class BasicView extends View {
 
   scroller: ScrollComponent
-  header: DayTableHeader
+  header: DayHeader
   dayGrid: DayGrid // the main subcomponent that does most of the heavy lifting
   colWeekNumbersVisible: boolean
 
@@ -72,7 +72,7 @@ export default class BasicView extends View {
     }
 
     if (this.opt('columnHeader')) {
-      this.header = new DayTableHeader(
+      this.header = new DayHeader(
         this.context,
         this.el.querySelector('.fc-head-container')
       )

src/common/DayHeader.ts

@@ -0,0 +1,74 @@
+import Component, { ComponentContext } from '../component/Component'
+import { htmlToElement, removeElement } from '../util/dom-manip'
+import { DateMarker } from '../datelib/marker'
+import { DateProfile } from '../DateProfileGenerator'
+import { createFormatter } from '../datelib/formatting'
+import { computeFallbackHeaderFormat, renderDateCell } from './table-utils'
+
+export interface DayTableHeaderProps {
+  dates: DateMarker[]
+  dateProfile: DateProfile
+  datesRepDistinctDays: boolean
+  renderIntroHtml?: () => string
+}
+
+export default class DayHeader extends Component<DayTableHeaderProps> {
+
+  el: HTMLElement
+  thead: HTMLElement
+
+  constructor(context: ComponentContext, parentEl: HTMLElement) {
+    super(context)
+
+    parentEl.innerHTML = '' // because might be nbsp
+    parentEl.appendChild(
+      this.el = htmlToElement(
+        '<div class="fc-row ' + this.theme.getClass('headerRow') + '">' +
+          '<table class="' + this.theme.getClass('tableGrid') + '">' +
+            '<thead></thead>' +
+          '</table>' +
+        '</div>'
+      )
+    )
+
+    this.thead = this.el.querySelector('thead')
+  }
+
+  destroy() {
+    removeElement(this.el)
+  }
+
+  render(props: DayTableHeaderProps) {
+    let { dates, datesRepDistinctDays } = props
+    let parts = []
+
+    if (props.renderIntroHtml) {
+      parts.push(props.renderIntroHtml())
+    }
+
+    let colHeadFormat = createFormatter(
+      this.opt('columnHeaderFormat') ||
+      computeFallbackHeaderFormat(datesRepDistinctDays, dates.length)
+    )
+
+    for (let date of dates) {
+      parts.push(
+        renderDateCell(
+          date,
+          props.dateProfile,
+          datesRepDistinctDays,
+          dates.length,
+          colHeadFormat,
+          this.context
+        )
+      )
+    }
+
+    if (this.isRtl) {
+      parts.reverse()
+    }
+
+    this.thead.innerHTML = '<tr>' + parts.join('') + '</tr>'
+  }
+
+}

src/basic/DayTableHeader.ts → src/common/table-utils.ts

@@ -1,94 +1,24 @@
-import Component, { ComponentContext } from '../component/Component'
-import { htmlToElement, removeElement } from '../util/dom-manip'
-import { DateMarker, DAY_IDS } from '../datelib/marker'
-import { DateProfile } from '../DateProfileGenerator'
 import { rangeContainsMarker } from '../datelib/date-range'
 import { htmlEscape } from '../util/html'
 import { buildGotoAnchorHtml, getDayClasses } from '../component/date-rendering'
-import { createFormatter } from '../datelib/formatting'
-
-export interface DayTableHeaderProps {
-  dates: DateMarker[]
-  dateProfile: DateProfile
-  datesRepDistinctDays: boolean
-  renderIntroHtml?: () => string
-}
-
-export default class DayTableHeader extends Component<DayTableHeaderProps> {
-
-  el: HTMLElement
-  thead: HTMLElement
-
-  constructor(context: ComponentContext, parentEl: HTMLElement) {
-    super(context)
-
-    parentEl.innerHTML = '' // because might be nbsp
-    parentEl.appendChild(
-      this.el = htmlToElement(
-        '<div class="fc-row ' + this.theme.getClass('headerRow') + '">' +
-          '<table class="' + this.theme.getClass('tableGrid') + '">' +
-            '<thead></thead>' +
-          '</table>' +
-        '</div>'
-      )
-    )
-
-    this.thead = this.el.querySelector('thead')
-  }
-
-  destroy() {
-    removeElement(this.el)
-  }
-
-  render(props: DayTableHeaderProps) {
-    let { dates, datesRepDistinctDays } = props
-    let parts = []
-
-    if (props.renderIntroHtml) {
-      parts.push(props.renderIntroHtml())
-    }
-
-    let colHeadFormat = createFormatter(
-      this.opt('columnHeaderFormat') ||
-      computeFallbackHeaderFormat(datesRepDistinctDays, dates.length)
-    )
-
-    for (let date of dates) {
-      parts.push(
-        renderDateCell(
-          date,
-          props.dateProfile,
-          datesRepDistinctDays,
-          dates.length,
-          colHeadFormat,
-          this.context
-        )
-      )
-    }
-
-    if (this.isRtl) {
-      parts.reverse()
-    }
-
-    this.thead.innerHTML = '<tr>' + parts.join('') + '</tr>'
-  }
-
-}
+import { DateMarker, DAY_IDS } from '../datelib/marker'
+import { DateProfile } from '../DateProfileGenerator'
+import { ComponentContext } from '../component/Component'
 
 // Computes a default column header formatting string if `colFormat` is not explicitly defined
-function computeFallbackHeaderFormat(datesRepDistinctDays: boolean, dayCnt: number) {
-    // if more than one week row, or if there are a lot of columns with not much space,
-    // put just the day numbers will be in each cell
-    if (!datesRepDistinctDays || dayCnt > 10) {
-      return { weekday: 'short' } // "Sat"
-    } else if (dayCnt > 1) {
-      return { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true } // "Sat 11/12"
-    } else {
-      return { weekday: 'long' } // "Saturday"
-    }
+export function computeFallbackHeaderFormat(datesRepDistinctDays: boolean, dayCnt: number) {
+  // if more than one week row, or if there are a lot of columns with not much space,
+  // put just the day numbers will be in each cell
+  if (!datesRepDistinctDays || dayCnt > 10) {
+    return { weekday: 'short' } // "Sat"
+  } else if (dayCnt > 1) {
+    return { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true } // "Sat 11/12"
+  } else {
+    return { weekday: 'long' } // "Saturday"
+  }
 }
 
-function renderDateCell(
+export function renderDateCell(
   date: DateMarker,
   dateProfile: DateProfile,
   datesRepDistinctDays,

src/exports.ts

@@ -96,8 +96,11 @@ export { defineView, getViewConfig } from './ViewRegistry'
 export { default as FgEventRenderer } from './component/renderers/FgEventRenderer'
 export { default as FillRenderer } from './component/renderers/FillRenderer'
 export { default as AgendaView } from './agenda/AgendaView'
+export { default as AbstractAgendaView} from './agenda/AbstractAgendaView'
 export { default as TimeGrid } from './agenda/TimeGrid'
+export { default as TimeGridSlicer } from './agenda/TimeGridSlicer'
 export { default as DayGrid } from './basic/DayGrid'
+export { default as DayGridSlicer } from './basic/DayGridSlicer'
 export { default as BasicView } from './basic/BasicView'
 export { default as MonthView } from './basic/MonthView'
 export { default as ListView } from './list/ListView'
@@ -139,3 +142,5 @@ export { registerRecurringType, ParsedRecurring } from './structs/recurring-even
 
 export { createPlugin, PluginDef, PluginDefInput } from './plugin-system'
 export { reducerFunc, Action, CalendarState } from './reducers/types'
+
+export { computeFallbackHeaderFormat, renderDateCell } from './common/table-utils'