move rendering out of DayTableMixin

src/agenda/TimeGrid.ts

@@ -15,6 +15,8 @@ import StandardDateComponent from '../component/StandardDateComponent'
 import OffsetTracker from '../common/OffsetTracker'
 import { Hit } from '../interactions/HitDragging'
 import AgendaView from './AgendaView'
+import DayTableHeader from '../basic/DayTableHeader'
+import DayBgRow from '../basic/DayBgRow'
 
 /* A component that renders one or more columns of vertical time slots
 ----------------------------------------------------------------------------------------------------------------------*/
@@ -36,9 +38,6 @@ export default class TimeGrid extends StandardDateComponent {
   daysPerRow: DayTableInterface['daysPerRow']
   colCnt: DayTableInterface['colCnt']
   updateDayTable: DayTableInterface['updateDayTable']
-  renderHeadHtml: DayTableInterface['renderHeadHtml']
-  renderBgTrHtml: DayTableInterface['renderBgTrHtml']
-  bookendCells: DayTableInterface['bookendCells']
   getCellDate: DayTableInterface['getCellDate']
 
   mirrorRenderer: any
@@ -232,6 +231,21 @@ export default class TimeGrid extends StandardDateComponent {
   }
 
 
+  renderIntroHtml() {
+    return ''
+  }
+
+
+  renderHeadIntroHtml() {
+    return this.renderIntroHtml()
+  }
+
+
+  renderBgIntroHtml() {
+    return this.renderIntroHtml()
+  }
+
+
   renderSlats() {
     let { theme } = this
 
@@ -307,12 +321,24 @@ export default class TimeGrid extends StandardDateComponent {
     })
 
     if (this.headContainerEl) {
-      this.headContainerEl.innerHTML = this.renderHeadHtml()
+      // TODO: destroy?
+      let header = new DayTableHeader(this.context, this.headContainerEl)
+      header.receiveProps({
+        dateProfile,
+        dates: this.dayDates,
+        datesRepDistinctDays: true,
+        renderIntroHtml: this.renderHeadIntroHtml.bind(this)
+      })
     }
 
+    let bgRow = new DayBgRow(this.context)
     this.rootBgContainerEl.innerHTML =
       '<table class="' + theme.getClass('tableGrid') + '">' +
-        this.renderBgTrHtml(0) + // row=0
+        bgRow.renderHtml({
+          dates: this.dayDates,
+          dateProfile,
+          renderIntroHtml: this.renderBgIntroHtml.bind(this)
+        }) +
       '</table>'
 
     this.colEls = findElements(this.el, '.fc-day, .fc-disabled-day')
@@ -339,12 +365,13 @@ export default class TimeGrid extends StandardDateComponent {
 
   // Renders the DOM that the view's content will live in
   renderContentSkeleton() {
-    let cellHtml = ''
-    let i
+    let parts = []
     let skeletonEl: HTMLElement
 
-    for (i = 0; i < this.colCnt; i++) {
-      cellHtml +=
+    parts.push(this.renderIntroHtml())
+
+    for (let i = 0; i < this.colCnt; i++) {
+      parts.push(
         '<td>' +
           '<div class="fc-content-col">' +
             '<div class="fc-event-container fc-mirror-container"></div>' +
@@ -354,12 +381,17 @@ export default class TimeGrid extends StandardDateComponent {
             '<div class="fc-business-container"></div>' +
           '</div>' +
         '</td>'
+      )
+    }
+
+    if (this.isRtl) {
+      parts.reverse()
     }
 
     skeletonEl = this.contentSkeletonEl = htmlToElement(
       '<div class="fc-content-skeleton">' +
         '<table>' +
-          '<tr>' + cellHtml + '</tr>' +
+          '<tr>' + parts.join('') + '</tr>' +
         '</table>' +
       '</div>'
     )
@@ -371,7 +403,6 @@ export default class TimeGrid extends StandardDateComponent {
     this.highlightContainerEls = findElements(skeletonEl, '.fc-highlight-container')
     this.businessContainerEls = findElements(skeletonEl, '.fc-business-container')
 
-    this.bookendCells(skeletonEl.querySelector('tr')) // TODO: do this on string level
     this.el.appendChild(skeletonEl)
   }
 

src/basic/DayBgRow.ts

@@ -0,0 +1,66 @@
+import { ComponentContext } from "../component/Component"
+import { DateMarker } from "../datelib/marker"
+import { getDayClasses } from "../component/date-rendering";
+import { rangeContainsMarker } from "../datelib/date-range";
+import { DateProfile } from "../DateProfileGenerator";
+
+export interface DayBgRowProps {
+  dates: DateMarker[]
+  dateProfile: DateProfile
+  renderIntroHtml?: () => string
+}
+
+export default class DayBgRow {
+
+  context: ComponentContext
+
+  constructor(context: ComponentContext) {
+    this.context = context
+  }
+
+  renderHtml(props: DayBgRowProps) {
+    let parts = []
+
+    if (props.renderIntroHtml) {
+      parts.push(props.renderIntroHtml())
+    }
+
+    for (let date of props.dates) {
+      parts.push(
+        this.renderCellHtml(date, props.dateProfile)
+      )
+    }
+
+    if (this.context.options.dir === 'rtl') {
+      parts.reverse()
+    }
+
+    return '<tr>' + parts.join('') + '</tr>'
+  }
+
+  renderCellHtml(date: DateMarker, dateProfile: DateProfile) {
+    return renderCellHtml(
+      date,
+      dateProfile,
+      this.context
+    )
+  }
+
+}
+
+function renderCellHtml(date: DateMarker, dateProfile: DateProfile, context: ComponentContext, otherAttrs?) {
+  let { dateEnv, theme } = context
+  let isDateValid = rangeContainsMarker(dateProfile.activeRange, date) // TODO: called too frequently. cache somehow.
+  let classes = getDayClasses(date, dateProfile, context)
+
+  classes.unshift('fc-day', theme.getClass('widgetContent'))
+
+  return '<td class="' + classes.join(' ') + '"' +
+    (isDateValid ?
+      ' data-date="' + dateEnv.formatIso(date, { omitTime: true }) + '"' :
+      '') +
+    (otherAttrs ?
+      ' ' + otherAttrs :
+      '') +
+    '></td>'
+}

src/basic/DayGrid.ts

@@ -25,6 +25,8 @@ import { DateRange, rangeContainsMarker, intersectRanges } from '../datelib/date
 import OffsetTracker from '../common/OffsetTracker'
 import { EventRenderRange } from '../component/event-rendering'
 import { buildGotoAnchorHtml, getDayClasses } from '../component/date-rendering'
+import DayTableHeader from './DayTableHeader'
+import DayBgRow from './DayBgRow'
 
 const DAY_NUM_FORMAT = createFormatter({ day: 'numeric' })
 const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
@@ -37,16 +39,13 @@ export default class DayGrid extends StandardDateComponent {
 
   rowCnt: DayTableInterface['rowCnt']
   colCnt: DayTableInterface['colCnt']
+  dayDates: DayTableInterface['dayDates']
   daysPerRow: DayTableInterface['daysPerRow']
   sliceRangeByRow: DayTableInterface['sliceRangeByRow']
   updateDayTable: DayTableInterface['updateDayTable']
-  renderHeadHtml: DayTableInterface['renderHeadHtml']
   getCellDate: DayTableInterface['getCellDate']
-  renderBgTrHtml: DayTableInterface['renderBgTrHtml']
-  renderIntroHtml: DayTableInterface['renderIntroHtml']
   getCellRange: DayTableInterface['getCellRange']
   sliceRangeByDay: DayTableInterface['sliceRangeByDay']
-  bookendCells: DayTableInterface['bookendCells']
   breakOnWeeks: DayTableInterface['breakOnWeeks']
 
   view: View // TODO: make more general and/or remove
@@ -157,7 +156,14 @@ export default class DayGrid extends StandardDateComponent {
     let col
 
     if (this.headerContainerEl) {
-      this.headerContainerEl.innerHTML = this.renderHeadHtml()
+      // TODO: destroy?
+      let header = new DayTableHeader(this.context, this.headerContainerEl)
+      header.receiveProps({
+        dateProfile: this.props.dateProfile,
+        dates: this.dayDates.slice(0, this.colCnt), // because might be mult rows
+        datesRepDistinctDays: this.rowCnt === 1,
+        renderIntroHtml: this.renderHeadIntroHtml.bind(this)
+      })
     }
 
     for (row = 0; row < rowCnt; row++) {
@@ -200,18 +206,29 @@ export default class DayGrid extends StandardDateComponent {
   // Generates the HTML for a single row, which is a div that wraps a table.
   // `row` is the row number.
   renderDayRowHtml(row, isRigid) {
-    let { theme } = this
+    let { theme, daysPerRow } = this
     let classes = [ 'fc-row', 'fc-week', theme.getClass('dayRow') ]
 
     if (isRigid) {
       classes.push('fc-rigid')
     }
 
+    let dates = this.dayDates.slice(
+      row * daysPerRow,
+      (row + 1) * daysPerRow
+    )
+
+    let bgRow = new DayBgRow(this.context)
+
     return '' +
       '<div class="' + classes.join(' ') + '">' +
         '<div class="fc-bg">' +
           '<table class="' + theme.getClass('tableGrid') + '">' +
-            this.renderBgTrHtml(row) +
+            bgRow.renderHtml({
+              dates,
+              dateProfile: this.props.dateProfile,
+              renderIntroHtml: this.renderBgIntroHtml.bind(this)
+            }) +
           '</table>' +
         '</div>' +
         '<div class="fc-content-skeleton">' +
@@ -252,11 +269,26 @@ export default class DayGrid extends StandardDateComponent {
   }
 
 
+  renderIntroHtml() {
+    return ''
+  }
+
+
+  renderHeadIntroHtml() {
+    return this.renderIntroHtml()
+  }
+
+
   renderNumberIntroHtml(row) {
     return this.renderIntroHtml()
   }
 
 
+  renderBgIntroHtml() {
+    return this.renderIntroHtml()
+  }
+
+
   renderNumberCellsHtml(row) {
     let htmls = []
     let col
@@ -286,7 +318,7 @@ export default class DayGrid extends StandardDateComponent {
       return '<td></td>' //  will create an empty space above events :(
     }
 
-    classes = getDayClasses(this, date)
+    classes = getDayClasses(date, this.props.dateProfile, this.context)
     classes.unshift('fc-day-top')
 
     if (this.cellWeekNumbersVisible) {

src/basic/DayGridEventRenderer.ts

@@ -1,4 +1,4 @@
-import { createElement, removeElement } from '../util/dom-manip'
+import { createElement, removeElement, appendToElement, prependToElement } from '../util/dom-manip'
 import DayGrid from './DayGrid'
 import { Seg } from '../component/DateComponent'
 import SimpleDayGridEventRenderer from './SimpleDayGridEventRenderer'
@@ -71,7 +71,8 @@ export default class DayGridEventRenderer extends SimpleDayGridEventRenderer {
   // the segments. Returns object with a bunch of internal data about how the render was calculated.
   // NOTE: modifies rowSegs
   renderSegRow(row, rowSegs) {
-    let colCnt = this.dayGrid.colCnt
+    let { dayGrid } = this
+    let colCnt = dayGrid.colCnt
     let segLevels = this.buildSegLevels(rowSegs) // group into sub-arrays of levels
     let levelCnt = Math.max(1, segLevels.length) // ensure at least one level
     let tbody = document.createElement('tbody')
@@ -139,7 +140,16 @@ export default class DayGridEventRenderer extends SimpleDayGridEventRenderer {
       }
 
       emptyCellsUntil(colCnt) // finish off the row
-      this.dayGrid.bookendCells(tr)
+
+      let introHtml = dayGrid.renderIntroHtml()
+      if (introHtml) {
+        if (dayGrid.isRtl) {
+          appendToElement(tr, introHtml)
+        } else {
+          prependToElement(tr, introHtml)
+        }
+      }
+
       tbody.appendChild(tr)
     }
 

src/basic/DayGridFillRenderer.ts

@@ -1,4 +1,4 @@
-import { htmlToElement, createElement } from '../util/dom-manip'
+import { htmlToElement, createElement, appendToElement, prependToElement } from '../util/dom-manip'
 import FillRenderer from '../component/renderers/FillRenderer'
 import DayGrid from './DayGrid'
 import { Seg } from '../component/DateComponent'
@@ -65,7 +65,14 @@ export default class DayGridFillRenderer extends FillRenderer {
       trEl.appendChild(createElement('td', { colSpan: colCnt - endCol }))
     }
 
-    dayGrid.bookendCells(trEl)
+    let introHtml = dayGrid.renderIntroHtml()
+    if (introHtml) {
+      if (dayGrid.isRtl) {
+        appendToElement(trEl, introHtml)
+      } else {
+        prependToElement(trEl, introHtml)
+      }
+    }
 
     return skeletonEl
   }

src/basic/DayTableHeader.ts

@@ -0,0 +1,156 @@
+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') ||
+      this.computeColHeadFormat(datesRepDistinctDays, dates.length)
+    )
+
+    for (let date of dates) {
+      parts.push(
+        this.renderDateCell(
+          date,
+          props.dateProfile,
+          datesRepDistinctDays,
+          dates.length,
+          colHeadFormat
+        )
+      )
+    }
+
+    if (this.isRtl) {
+      parts.reverse()
+    }
+
+    this.thead.innerHTML = '<tr>' + parts.join('') + '</tr>'
+  }
+
+  renderDateCell(date: DateMarker, dateProfile: DateProfile, datesRepDistinctDays, dayCnt, colHeadFormat): string {
+    return renderDateCell(date, dateProfile, datesRepDistinctDays, dayCnt, colHeadFormat, this.context)
+  }
+
+  // Computes a default column header formatting string if `colFormat` is not explicitly defined
+  computeColHeadFormat(datesRepDistinctDays, dayCnt) {
+    // 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(
+  date: DateMarker,
+  dateProfile: DateProfile,
+  datesRepDistinctDays,
+  colCnt,
+  colHeadFormat,
+  context: ComponentContext,
+  colspan?,
+  otherAttrs?
+): string {
+  let { view, dateEnv, theme, options } = context
+  let isDateValid = rangeContainsMarker(dateProfile.activeRange, date) // TODO: called too frequently. cache somehow.
+  let classNames = [
+    'fc-day-header',
+    theme.getClass('widgetHeader')
+  ]
+  let innerHtml
+
+  if (typeof options.columnHeaderHtml === 'function') {
+    innerHtml = options.columnHeaderHtml(date)
+  } else if (typeof options.columnHeaderText === 'function') {
+    innerHtml = htmlEscape(
+      options.columnHeaderText(date)
+    )
+  } else {
+    innerHtml = htmlEscape(dateEnv.format(date, colHeadFormat))
+  }
+
+  // if only one row of days, the classNames on the header can represent the specific days beneath
+  if (datesRepDistinctDays) {
+    classNames = classNames.concat(
+      // includes the day-of-week class
+      // noThemeHighlight=true (don't highlight the header)
+      getDayClasses(date, dateProfile, context, true)
+    )
+  } else {
+    classNames.push('fc-' + DAY_IDS[date.getUTCDay()]) // only add the day-of-week class
+  }
+
+  return '' +
+    '<th class="' + classNames.join(' ') + '"' +
+      ((isDateValid && datesRepDistinctDays) ?
+        ' data-date="' + dateEnv.formatIso(date, { omitTime: true }) + '"' :
+        '') +
+        (colspan > 1 ?
+          ' colspan="' + colspan + '"' :
+          '') +
+        (otherAttrs ?
+          ' ' + otherAttrs :
+          '') +
+      '>' +
+      (isDateValid ?
+        // don't make a link if the heading could represent multiple days, or if there's only one day (forceOff)
+        buildGotoAnchorHtml(
+          view,
+          { date: date, forceOff: !datesRepDistinctDays || colCnt === 1 },
+          innerHtml
+        ) :
+        // if not valid, display text, but no link
+        innerHtml
+      ) +
+    '</th>'
+}

src/component/DayTableMixin.ts

@@ -1,11 +1,6 @@
-import { htmlEscape } from '../util/html'
-import { prependToElement, appendToElement } from '../util/dom-manip'
 import Mixin from '../common/Mixin'
-import { DateMarker, DAY_IDS, addDays, diffDays } from '../datelib/marker'
-import { createFormatter } from '../datelib/formatting'
-import { DateRange, rangeContainsMarker } from '../datelib/date-range'
-import { buildGotoAnchorHtml, getDayClasses } from './date-rendering'
-import View from 'src/View'
+import { DateMarker, addDays, diffDays } from '../datelib/marker'
+import { DateRange } from '../datelib/date-range'
 
 export interface DayTableInterface {
   dayDates: DateMarker[]
@@ -14,14 +9,10 @@ export interface DayTableInterface {
   colCnt: any
   breakOnWeeks: boolean
   updateDayTable()
-  renderHeadHtml()
-  renderBgTrHtml(row)
-  bookendCells(trEl: HTMLElement)
   getCellDate(row, col)
   getCellRange(row, col): DateRange
   sliceRangeByDay(range)
   sliceRangeByRow(range)
-  renderIntroHtml()
 }
 
 /*
@@ -36,14 +27,19 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
   daysPerRow: any
   rowCnt: any
   colCnt: any
-  colHeadFormat: any
 
 
   // Populates internal variables used for date calculation and rendering
+  /*
+  sets dayDates
+  sets dayIndices ( dayoffset -> something )
+  sets daysPerRow
+  sets rowCnt
+  sets colCnt
+  */
   updateDayTable() {
-    let t = (this as any)
-    let view = t.view as View
-    let dateProfile = t.props.dateProfile
+    let view = (this as any).view
+    let dateProfile = (this as any).props.dateProfile
     let date: DateMarker = dateProfile.renderRange.start
     let end: DateMarker = dateProfile.renderRange.end
     let dayIndex = -1
@@ -82,18 +78,7 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
     this.dayIndices = dayIndices
     this.daysPerRow = daysPerRow
     this.rowCnt = rowCnt
-
-    this.updateDayTableCols()
-  }
-
-
-  // Computes and assigned the colCnt property and updates any options that may be computed from it
-  updateDayTableCols() {
     this.colCnt = this.computeColCnt()
-    this.colHeadFormat = createFormatter(
-      (this as any).opt('columnHeaderFormat') ||
-      this.computeColHeadFormat()
-    )
   }
 
 
@@ -153,24 +138,6 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
   }
 
 
-  /* Options
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  // Computes a default column header formatting string if `colFormat` is not explicitly defined
-  computeColHeadFormat() {
-    // 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 (this.rowCnt > 1 || this.colCnt > 10) {
-      return { weekday: 'short' } // "Sat"
-    } else if (this.colCnt > 1) {
-      return { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true } // "Sat 11/12"
-    } else {
-      return { weekday: 'long' } // "Saturday"
-    }
-  }
-
-
   /* Slicing
   ------------------------------------------------------------------------------------------------------------------*/
 
@@ -267,200 +234,4 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
     return segs
   }
 
-
-  /* Header Rendering
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  renderHeadHtml() {
-    let theme = (this as any).theme
-
-    return '' +
-      '<div class="fc-row ' + theme.getClass('headerRow') + '">' +
-        '<table class="' + theme.getClass('tableGrid') + '">' +
-          '<thead>' +
-            this.renderHeadTrHtml() +
-          '</thead>' +
-        '</table>' +
-      '</div>'
-  }
-
-
-  renderHeadIntroHtml() {
-    return this.renderIntroHtml() // fall back to generic
-  }
-
-
-  renderHeadTrHtml() {
-    return '' +
-      '<tr>' +
-        ((this as any).isRtl ? '' : this.renderHeadIntroHtml()) +
-        this.renderHeadDateCellsHtml() +
-        ((this as any).isRtl ? this.renderHeadIntroHtml() : '') +
-      '</tr>'
-  }
-
-
-  renderHeadDateCellsHtml() {
-    let htmls = []
-    let col
-    let date: DateMarker
-
-    for (col = 0; col < this.colCnt; col++) {
-      date = this.getCellDate(0, col)
-      htmls.push((this as any).renderHeadDateCellHtml(date))
-    }
-
-    return htmls.join('')
-  }
-
-
-  // TODO: when internalApiVersion, accept an object for HTML attributes
-  // (colspan should be no different)
-  renderHeadDateCellHtml(date: DateMarker, colspan, otherAttrs) {
-    let t = (this as any)
-    let view = t.view
-    let dateEnv = t.dateEnv
-    let dateProfile = t.props.dateProfile
-    let isDateValid = rangeContainsMarker(dateProfile.activeRange, date) // TODO: called too frequently. cache somehow.
-    let classNames = [
-      'fc-day-header',
-      view.calendar.theme.getClass('widgetHeader')
-    ]
-    let innerHtml
-
-    if (typeof t.opt('columnHeaderHtml') === 'function') {
-      innerHtml = t.opt('columnHeaderHtml')(date)
-    } else if (typeof t.opt('columnHeaderText') === 'function') {
-      innerHtml = htmlEscape(
-        t.opt('columnHeaderText')(date)
-      )
-    } else {
-      innerHtml = htmlEscape(dateEnv.format(date, t.colHeadFormat))
-    }
-
-    // if only one row of days, the classNames on the header can represent the specific days beneath
-    if (t.rowCnt === 1) {
-      classNames = classNames.concat(
-        // includes the day-of-week class
-        // noThemeHighlight=true (don't highlight the header)
-        getDayClasses(t, date, true)
-      )
-    } else {
-      classNames.push('fc-' + DAY_IDS[date.getUTCDay()]) // only add the day-of-week class
-    }
-
-    return '' +
-      '<th class="' + classNames.join(' ') + '"' +
-        ((isDateValid && t.rowCnt) === 1 ?
-          ' data-date="' + dateEnv.formatIso(date, { omitTime: true }) + '"' :
-          '') +
-        (colspan > 1 ?
-          ' colspan="' + colspan + '"' :
-          '') +
-        (otherAttrs ?
-          ' ' + otherAttrs :
-          '') +
-        '>' +
-        (isDateValid ?
-          // don't make a link if the heading could represent multiple days, or if there's only one day (forceOff)
-          buildGotoAnchorHtml(
-            view,
-            { date: date, forceOff: t.rowCnt > 1 || t.colCnt === 1 },
-            innerHtml
-          ) :
-          // if not valid, display text, but no link
-          innerHtml
-        ) +
-      '</th>'
-  }
-
-
-  /* Background Rendering
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  renderBgTrHtml(row) {
-    return '' +
-      '<tr>' +
-        ((this as any).isRtl ? '' : this.renderBgIntroHtml(row)) +
-        this.renderBgCellsHtml(row) +
-        ((this as any).isRtl ? this.renderBgIntroHtml(row) : '') +
-      '</tr>'
-  }
-
-
-  renderBgIntroHtml(row) {
-    return this.renderIntroHtml() // fall back to generic
-  }
-
-
-  renderBgCellsHtml(row) {
-    let htmls = []
-    let col
-    let date
-
-    for (col = 0; col < this.colCnt; col++) {
-      date = this.getCellDate(row, col)
-      htmls.push((this as any).renderBgCellHtml(date))
-    }
-
-    return htmls.join('')
-  }
-
-
-  renderBgCellHtml(date: DateMarker, otherAttrs) {
-    let t = (this as any)
-    let view = t.view
-    let dateEnv = t.dateEnv
-    let dateProfile = t.props.dateProfile
-    let isDateValid = rangeContainsMarker(dateProfile.activeRange, date) // TODO: called too frequently. cache somehow.
-    let classes = getDayClasses(t, date)
-
-    classes.unshift('fc-day', view.calendar.theme.getClass('widgetContent'))
-
-    return '<td class="' + classes.join(' ') + '"' +
-      (isDateValid ?
-        ' data-date="' + dateEnv.formatIso(date, { omitTime: true }) + '"' :
-        '') +
-      (otherAttrs ?
-        ' ' + otherAttrs :
-        '') +
-      '></td>'
-  }
-
-
-  /* Generic
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  // Generates the default HTML intro for any row. User classes should override
-  renderIntroHtml(): string {
-    return ''
-  }
-
-
-  // TODO: a generic method for dealing with <tr>, RTL, intro
-  // when increment internalApiVersion
-  // wrapTr (scheduler)
-
-
-  /* Utils
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  // Applies the generic "intro" and "outro" HTML to the given cells.
-  // Intro means the leftmost cell when the calendar is LTR and the rightmost cell when RTL. Vice-versa for outro.
-  bookendCells(trEl: HTMLElement) {
-    let introHtml = this.renderIntroHtml()
-
-    if (introHtml) {
-      if ((this as any).isRtl) {
-        appendToElement(trEl, introHtml)
-      } else {
-        prependToElement(trEl, introHtml)
-      }
-    }
-  }
-
 }

src/component/date-rendering.ts

@@ -1,8 +1,8 @@
 import { htmlEscape, attrsToStr } from '../util/html'
 import { DateMarker, startOfDay, addDays, DAY_IDS } from '../datelib/marker'
 import { rangeContainsMarker } from '../datelib/date-range'
-import Component from '../component/Component'
-import DateComponent from './DateComponent'
+import Component, { ComponentContext } from '../component/Component'
+import { DateProfile } from '../DateProfileGenerator'
 
 
 // Generates HTML for an anchor to another view into the calendar.
@@ -59,9 +59,8 @@ export function getAllDayHtml(component: Component<any>) {
 
 
 // Computes HTML classNames for a single-day element
-export function getDayClasses(component: DateComponent<any>, date: DateMarker, noThemeHighlight?) {
-  let { calendar, view, theme } = component
-  let dateProfile = component.props.dateProfile
+export function getDayClasses(date: DateMarker, dateProfile: DateProfile, context: ComponentContext, noThemeHighlight?) {
+  let { calendar, view, theme } = context
   let classes = []
   let todayStart: DateMarker
   let todayEnd: DateMarker