move grid rendering config into settings, no longer subclassing

src/agenda/AgendaView.ts

@@ -1,5 +1,5 @@
 import { htmlEscape } from '../util/html'
-import { copyOwnProps, assignTo } from '../util/object'
+import { assignTo } from '../util/object'
 import { findElements, createElement } from '../util/dom-manip'
 import {
   matchCellWidths,
@@ -20,13 +20,14 @@ import { EventUiHash, hasBgRendering } from '../component/event-rendering'
 import { buildGotoAnchorHtml, getAllDayHtml } from '../component/date-rendering'
 import { StandardDateComponentProps } from '../component/StandardDateComponent'
 import { DateMarker } from '../datelib/marker'
+import DayTable from '../component/DayTable';
+import { ComponentContext } from '../component/Component';
+import { ViewSpec } from '../structs/view-spec';
+import DateProfileGenerator from '../DateProfileGenerator';
 
 const AGENDA_ALL_DAY_EVENT_LIMIT = 5
 const WEEK_HEADER_FORMAT = createFormatter({ week: 'short' })
 
-let agendaTimeGridMethods
-let agendaDayGridMethods
-
 
 /* An abstract class for all agenda-related views. Displays one more columns with time slots running vertically.
 ----------------------------------------------------------------------------------------------------------------------*/
@@ -35,10 +36,6 @@ let agendaDayGridMethods
 
 export default class AgendaView extends View {
 
-  // initialized after class
-  timeGridClass: any // class used to instantiate the timeGrid. subclasses can override
-  dayGridClass: any // class used to instantiate the dayGrid. subclasses can override
-
   timeGrid: TimeGrid // the main time-grid subcomponent of this view
   dayGrid: DayGrid // the "all-day" subcomponent. if all-day is turned off, this will be null
 
@@ -53,7 +50,8 @@ export default class AgendaView extends View {
   buildEventResizeForDayGrid: any
 
 
-  initialize() {
+  constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement) {
+    super(context, viewSpec, dateProfileGenerator, parentEl)
 
     this.filterEventsForTimeGrid = reselector(filterEventsForTimeGrid)
     this.filterEventsForDayGrid = reselector(filterEventsForDayGrid)
@@ -76,15 +74,31 @@ export default class AgendaView extends View {
     let timeGridEl = createElement('div', { className: 'fc-time-grid' })
     timeGridWrapEl.appendChild(timeGridEl)
 
-    this.timeGrid = this.instantiateTimeGrid(
+    this.timeGrid = new TimeGrid(
+      this.context,
       this.el.querySelector('.fc-head-container'),
-      timeGridEl
+      timeGridEl,
+      {
+        renderHeadIntroHtml: this.renderTimeGridHeadIntroHtml,
+        renderBgIntroHtml: this.renderTimeGridBgIntroHtml,
+        renderIntroHtml: this.renderTimeGridIntroHtml
+      }
     )
 
     if (this.opt('allDaySlot')) { // should we display the "all-day" area?
-      this.dayGrid = this.instantiateDayGrid( // the all-day subcomponent of this view
+
+      this.dayGrid = new DayGrid( // the all-day subcomponent of this view
+        this.context,
         null, // headContainerEl
-        this.el.querySelector('.fc-day-grid')
+        this.el.querySelector('.fc-day-grid'),
+        {
+          renderHeadIntroHtml: this.renderDayGridIntroHtml, // not used, because head not used
+          renderNumberIntroHtml: this.renderDayGridIntroHtml, // don't want numbers
+          renderBgIntroHtml: this.renderDayGridBgIntroHtml,
+          renderIntroHtml: this.renderDayGridIntroHtml,
+          colWeekNumbersVisible: false,
+          cellWeekNumbersVisible: false
+        }
       )
 
       // have the day-grid extend it's coordinate area over the <hr> dividing the two grids
@@ -106,22 +120,6 @@ export default class AgendaView extends View {
   }
 
 
-  // Instantiates the TimeGrid object this view needs. Draws from this.timeGridClass
-  instantiateTimeGrid(headerContainerEl: HTMLElement, el: HTMLElement) {
-    let timeGrid = new this.timeGridClass(this.context, headerContainerEl, el)
-    copyOwnProps(agendaTimeGridMethods, timeGrid)
-    return timeGrid
-  }
-
-
-  // Instantiates the DayGrid object this view might need. Draws from this.dayGridClass
-  instantiateDayGrid(headerContainerEl: HTMLElement, el: HTMLElement) {
-    let dayGrid = new this.dayGridClass(this.context, headerContainerEl, el)
-    copyOwnProps(agendaDayGridMethods, dayGrid)
-    return dayGrid
-  }
-
-
   /* Rendering
   ------------------------------------------------------------------------------------------------------------------*/
 
@@ -341,19 +339,14 @@ export default class AgendaView extends View {
     }
   }
 
-}
-
-
-AgendaView.prototype.timeGridClass = TimeGrid
-AgendaView.prototype.dayGridClass = DayGrid
 
+  /* Time Grid Render Methods
+  ------------------------------------------------------------------------------------------------------------------*/
 
-// Will customize the rendering behavior of the AgendaView's timeGrid
-agendaTimeGridMethods = {
 
   // Generates the HTML that will go before the day-of week header cells
-  renderHeadIntroHtml(this: TimeGrid) {
-    let { view, theme, dateEnv, dayTable } = this
+  renderTimeGridHeadIntroHtml = (dayTable: DayTable) => {
+    let { theme, dateEnv } = this
     let weekStart = this.props.dateProfile.renderRange.start
     let weekText
 
@@ -363,7 +356,7 @@ agendaTimeGridMethods = {
       return '' +
         '<th class="fc-axis fc-week-number ' + theme.getClass('widgetHeader') + '">' +
           buildGotoAnchorHtml( // aside from link, important for matchCellWidths
-            view,
+            this,
             { date: weekStart, type: 'week', forceOff: dayTable.colCnt > 1 },
             htmlEscape(weekText) // inner HTML
           ) +
@@ -371,50 +364,52 @@ agendaTimeGridMethods = {
     } else {
       return '<th class="fc-axis ' + theme.getClass('widgetHeader') + '"></th>'
     }
-  },
+  }
 
 
   // Generates the HTML that goes before the bg of the TimeGrid slot area. Long vertical column.
-  renderBgIntroHtml(this: TimeGrid) {
+  renderTimeGridBgIntroHtml = () => {
     let { theme } = this
 
     return '<td class="fc-axis ' + theme.getClass('widgetContent') + '"></td>'
-  },
+  }
 
 
   // Generates the HTML that goes before all other types of cells.
   // Affects content-skeleton, mirror-skeleton, highlight-skeleton for both the time-grid and day-grid.
-  renderIntroHtml(this: TimeGrid) {
+  renderTimeGridIntroHtml = () => {
     return '<td class="fc-axis"></td>'
   }
 
-}
 
+  /* Day Grid Render Methods
+  ------------------------------------------------------------------------------------------------------------------*/
 
-// Will customize the rendering behavior of the AgendaView's dayGrid
-agendaDayGridMethods = {
 
   // Generates the HTML that goes before the all-day cells
-  renderBgIntroHtml(this: DayGrid) {
-    let { view, theme } = this
+  renderDayGridBgIntroHtml = () => {
+    let { theme } = this
 
     return '' +
       '<td class="fc-axis ' + theme.getClass('widgetContent') + '">' +
         '<span>' + // needed for matchCellWidths
-          getAllDayHtml(view) +
+          getAllDayHtml(this) +
         '</span>' +
       '</td>'
-  },
+  }
 
 
   // Generates the HTML that goes before all other types of cells.
   // Affects content-skeleton, mirror-skeleton, highlight-skeleton for both the time-grid and day-grid.
-  renderIntroHtml(this: DayGrid) {
+  renderDayGridIntroHtml = () => {
     return '<td class="fc-axis"></td>'
   }
 
 }
 
+AgendaView.prototype.usesMinMaxTime = true // indicates that minTime/maxTime affects rendering
+
+
 function filterEventsForTimeGrid(eventStore: EventStore, eventUis: EventUiHash): EventStore {
   return filterEventStoreDefs(eventStore, function(eventDef) {
     return !eventDef.allDay || hasBgRendering(eventUis[eventDef.defId])
@@ -452,5 +447,3 @@ function buildInteractionForDayGrid(state: EventInteractionUiState): EventIntera
   }
   return null
 }
-
-AgendaView.prototype.usesMinMaxTime = true // indicates that minTime/maxTime affects rendering

src/agenda/TimeGrid.ts

@@ -31,10 +31,17 @@ const AGENDA_STOCK_SUB_DURATIONS = [
   { seconds: 15 }
 ]
 
+export interface RenderProps {
+  renderHeadIntroHtml: (dayTable: DayTable) => string
+  renderBgIntroHtml: () => string
+  renderIntroHtml: () => string
+}
+
 export default class TimeGrid extends StandardDateComponent {
 
   dayTable: DayTable
   mirrorRenderer: any
+  renderProps: RenderProps
 
   dayRanges: DateRange[] // of start-end of each day
   slotDuration: Duration // duration of a "slot", a distinct time segment on given day, visualized by lines
@@ -66,7 +73,7 @@ export default class TimeGrid extends StandardDateComponent {
   businessContainerEls: HTMLElement[]
 
 
-  constructor(context: ComponentContext, headContainerEl: HTMLElement, el: HTMLElement) {
+  constructor(context: ComponentContext, headContainerEl: HTMLElement, el: HTMLElement, renderProps: RenderProps) {
     super(context, el)
 
     this.eventRenderer = new TimeGridEventRenderer(this)
@@ -86,6 +93,8 @@ export default class TimeGrid extends StandardDateComponent {
     this.rootBgContainerEl = el.querySelector('.fc-bg')
     this.slatContainerEl = el.querySelector('.fc-slats')
     this.bottomRuleEl = el.querySelector('.fc-divider')
+
+    this.renderProps = renderProps
   }
 
 
@@ -234,21 +243,6 @@ export default class TimeGrid extends StandardDateComponent {
   }
 
 
-  renderIntroHtml() {
-    return ''
-  }
-
-
-  renderHeadIntroHtml() {
-    return this.renderIntroHtml()
-  }
-
-
-  renderBgIntroHtml() {
-    return this.renderIntroHtml()
-  }
-
-
   renderSlats() {
     let { theme } = this
 
@@ -331,7 +325,7 @@ export default class TimeGrid extends StandardDateComponent {
         dateProfile,
         dates: dayDates,
         datesRepDistinctDays: true,
-        renderIntroHtml: this.renderHeadIntroHtml.bind(this)
+        renderIntroHtml: this.renderProps.renderHeadIntroHtml.bind(null, this.dayTable)
       })
     }
 
@@ -341,7 +335,7 @@ export default class TimeGrid extends StandardDateComponent {
         bgRow.renderHtml({
           dates: dayDates,
           dateProfile,
-          renderIntroHtml: this.renderBgIntroHtml.bind(this)
+          renderIntroHtml: this.renderProps.renderBgIntroHtml
         }) +
       '</table>'
 
@@ -372,7 +366,9 @@ export default class TimeGrid extends StandardDateComponent {
     let parts = []
     let skeletonEl: HTMLElement
 
-    parts.push(this.renderIntroHtml())
+    parts.push(
+      this.renderProps.renderIntroHtml()
+    )
 
     for (let i = 0; i < this.dayTable.colCnt; i++) {
       parts.push(

src/basic/BasicView.ts

@@ -16,6 +16,10 @@ import DayGrid from './DayGrid'
 import { buildGotoAnchorHtml } from '../component/date-rendering'
 import { StandardDateComponentProps } from '../component/StandardDateComponent'
 import { assignTo } from '../util/object'
+import DayTable from '../component/DayTable';
+import { ComponentContext } from '../component/Component'
+import { ViewSpec } from '../structs/view-spec'
+import DateProfileGenerator from '../DateProfileGenerator'
 
 const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
 
@@ -27,15 +31,13 @@ const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
 
 export default class BasicView extends View {
 
-  // initialized after class
-  dayGridClass: any // class the dayGrid will be instantiated from (overridable by subclasses)
-
   scroller: ScrollComponent
   dayGrid: DayGrid // the main subcomponent that does most of the heavy lifting
   colWeekNumbersVisible: boolean
 
 
-  initialize() {
+  constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement) {
+    super(context, viewSpec, dateProfileGenerator, parentEl)
 
     this.el.classList.add('fc-basic-view')
     this.el.innerHTML = this.renderSkeletonHtml()
@@ -51,23 +53,35 @@ export default class BasicView extends View {
     let dayGridEl = createElement('div', { className: 'fc-day-grid' })
     dayGridContainerEl.appendChild(dayGridEl)
 
-    this.dayGrid = this.instantiateDayGrid(
-      this.el.querySelector('.fc-head-container'),
-      dayGridEl
-    )
-    this.dayGrid.isRigid = this.hasRigidRows()
+    let cellWeekNumbersVisible
 
     if (this.opt('weekNumbers')) {
       if (this.opt('weekNumbersWithinDays')) {
-        this.dayGrid.cellWeekNumbersVisible = true
+        cellWeekNumbersVisible = true
         this.colWeekNumbersVisible = false
       } else {
-        this.dayGrid.cellWeekNumbersVisible = false
+        cellWeekNumbersVisible = false
         this.colWeekNumbersVisible = true
       }
     } else {
       this.colWeekNumbersVisible = false
+      cellWeekNumbersVisible = false
     }
+
+    this.dayGrid = new DayGrid(
+      this.context,
+      this.el.querySelector('.fc-head-container'),
+      dayGridEl,
+      {
+        renderHeadIntroHtml: this.renderDayGridHeadIntroHtml,
+        renderNumberIntroHtml: this.renderDayGridNumberIntroHtml,
+        renderBgIntroHtml: this.renderDayGridBgIntroHtml,
+        renderIntroHtml: this.renderDayGridIntroHtml,
+        colWeekNumbersVisible: this.colWeekNumbersVisible,
+        cellWeekNumbersVisible
+      }
+    )
+    this.dayGrid.isRigid = this.hasRigidRows()
   }
 
 
@@ -79,16 +93,6 @@ export default class BasicView extends View {
   }
 
 
-  // Generates the DayGrid object this view needs. Draws from this.dayGridClass
-  instantiateDayGrid(headerContainerEl: HTMLElement, el: HTMLElement) {
-    // generate a subclass on the fly with BasicView-specific behavior
-    // TODO: cache this subclass
-    let subclass: any = makeDayGridSubclass(this.dayGridClass)
-
-    return new subclass(this.context, headerContainerEl, el)
-  }
-
-
   render(props: StandardDateComponentProps) {
     super.render(props)
 
@@ -251,87 +255,72 @@ export default class BasicView extends View {
     }
   }
 
-}
-
-
-BasicView.prototype.dateProfileGeneratorClass = BasicViewDateProfileGenerator
-BasicView.prototype.dayGridClass = DayGrid
-
-
-// customize the rendering behavior of BasicView's dayGrid
-function makeDayGridSubclass(SuperClass) {
-
-  return class SubClass extends SuperClass {
 
+  /* Day Grid Rendering
+  ------------------------------------------------------------------------------------------------------------------*/
 
-    // Generates the HTML that will go before the day-of week header cells
-    renderHeadIntroHtml(this: DayGrid) {
-      let { view, theme } = this
 
-      if ((view as BasicView).colWeekNumbersVisible) {
-        return '' +
-          '<th class="fc-week-number ' + theme.getClass('widgetHeader') + '">' +
-            '<span>' + // needed for matchCellWidths
-              htmlEscape(this.opt('weekLabel')) +
-            '</span>' +
-          '</th>'
-      }
+  // Generates the HTML that will go before the day-of week header cells
+  renderDayGridHeadIntroHtml = () => {
+    let { theme } = this
 
-      return ''
+    if (this.colWeekNumbersVisible) {
+      return '' +
+        '<th class="fc-week-number ' + theme.getClass('widgetHeader') + '">' +
+          '<span>' + // needed for matchCellWidths
+            htmlEscape(this.opt('weekLabel')) +
+          '</span>' +
+        '</th>'
     }
 
+    return ''
+  }
 
-    // Generates the HTML that will go before content-skeleton cells that display the day/week numbers
-    renderNumberIntroHtml(this: DayGrid, row) {
-      let { view, dateEnv, dayTable } = this
-      let weekStart = dayTable.getCellDate(row, 0)
-
-      if ((view as BasicView).colWeekNumbersVisible) {
-        return '' +
-          '<td class="fc-week-number">' +
-            buildGotoAnchorHtml( // aside from link, important for matchCellWidths
-              view,
-              { date: weekStart, type: 'week', forceOff: dayTable.colCnt === 1 },
-              dateEnv.format(weekStart, WEEK_NUM_FORMAT) // inner HTML
-            ) +
-          '</td>'
-      }
 
-      return ''
+  // Generates the HTML that will go before content-skeleton cells that display the day/week numbers
+  renderDayGridNumberIntroHtml = (row, dayTable: DayTable) => {
+    let { dateEnv } = this
+    let weekStart = dayTable.getCellDate(row, 0)
+
+    if (this.colWeekNumbersVisible) {
+      return '' +
+        '<td class="fc-week-number">' +
+          buildGotoAnchorHtml( // aside from link, important for matchCellWidths
+            this,
+            { date: weekStart, type: 'week', forceOff: dayTable.colCnt === 1 },
+            dateEnv.format(weekStart, WEEK_NUM_FORMAT) // inner HTML
+          ) +
+        '</td>'
     }
 
+    return ''
+  }
 
-    // Generates the HTML that goes before the day bg cells for each day-row
-    renderBgIntroHtml(this: DayGrid) {
-      let { view, theme } = this
 
-      if ((view as BasicView).colWeekNumbersVisible) {
-        return '<td class="fc-week-number ' + theme.getClass('widgetContent') + '"></td>'
-      }
+  // Generates the HTML that goes before the day bg cells for each day-row
+  renderDayGridBgIntroHtml = () => {
+    let { theme } = this
 
-      return ''
+    if (this.colWeekNumbersVisible) {
+      return '<td class="fc-week-number ' + theme.getClass('widgetContent') + '"></td>'
     }
 
+    return ''
+  }
 
-    // Generates the HTML that goes before every other type of row generated by DayGrid.
-    // Affects mirror-skeleton and highlight-skeleton rows.
-    renderIntroHtml(this: DayGrid) {
-      let { view } = this
 
-      if ((view as BasicView).colWeekNumbersVisible) {
-        return '<td class="fc-week-number"></td>'
-      }
+  // Generates the HTML that goes before every other type of row generated by DayGrid.
+  // Affects mirror-skeleton and highlight-skeleton rows.
+  renderDayGridIntroHtml = () => {
 
-      return ''
+    if (this.colWeekNumbersVisible) {
+      return '<td class="fc-week-number"></td>'
     }
 
+    return ''
+  }
 
-    getIsNumbersVisible(this: DayGrid) {
-      let { view } = this
+}
 
-      return DayGrid.prototype.getIsNumbersVisible.apply(this, arguments) ||
-        (view as BasicView).colWeekNumbersVisible
-    }
+BasicView.prototype.dateProfileGeneratorClass = BasicViewDateProfileGenerator
 
-  }
-}

src/basic/DayGrid.ts

@@ -38,12 +38,20 @@ export interface DayGridProps extends StandardDateComponent {
   breakOnWeeks: boolean
 }
 
+export interface RenderProps {
+  renderHeadIntroHtml: (dayTable: DayTable) => string
+  renderNumberIntroHtml: (row: number, dayTable: DayTable) => string
+  renderBgIntroHtml: () => string
+  renderIntroHtml: () => string
+  colWeekNumbersVisible: boolean // week numbers render in own column? (caller does HTML via intro)
+  cellWeekNumbersVisible: boolean // display week numbers in day cell?
+}
+
 export default class DayGrid extends StandardDateComponent {
 
   dayTable: DayTable
   eventRenderer: DayGridEventRenderer
-
-  cellWeekNumbersVisible: boolean = false // display week numbers in day cell?
+  renderProps: RenderProps
 
   bottomCoordPadding: number = 0 // hack for extending the hit area for the last row of the coordinate grid
 
@@ -63,7 +71,7 @@ export default class DayGrid extends StandardDateComponent {
   segPopoverTile: DayTile
 
 
-  constructor(context, headerContainerEl, el) {
+  constructor(context, headerContainerEl, el, renderProps: RenderProps) {
     super(context, el)
 
     this.eventRenderer = new DayGridEventRenderer(this)
@@ -72,6 +80,7 @@ export default class DayGrid extends StandardDateComponent {
     this.slicingType = 'all-day'
 
     this.headerContainerEl = headerContainerEl
+    this.renderProps = renderProps
   }
 
 
@@ -161,7 +170,7 @@ export default class DayGrid extends StandardDateComponent {
         dateProfile: this.props.dateProfile,
         dates: dayTable.dayDates.slice(0, dayTable.colCnt), // because might be mult rows
         datesRepDistinctDays: dayTable.rowCnt === 1,
-        renderIntroHtml: this.renderHeadIntroHtml.bind(this)
+        renderIntroHtml: this.renderProps.renderHeadIntroHtml.bind(null, this.dayTable)
       })
     }
 
@@ -227,7 +236,7 @@ export default class DayGrid extends StandardDateComponent {
             bgRow.renderHtml({
               dates,
               dateProfile: this.props.dateProfile,
-              renderIntroHtml: this.renderBgIntroHtml.bind(this)
+              renderIntroHtml: this.renderProps.renderBgIntroHtml
             }) +
           '</table>' +
         '</div>' +
@@ -246,7 +255,9 @@ export default class DayGrid extends StandardDateComponent {
 
 
   getIsNumbersVisible() {
-    return this.getIsDayNumbersVisible() || this.cellWeekNumbersVisible
+    return this.getIsDayNumbersVisible() ||
+      this.renderProps.cellWeekNumbersVisible ||
+      this.renderProps.colWeekNumbersVisible
   }
 
 
@@ -259,36 +270,18 @@ export default class DayGrid extends StandardDateComponent {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  renderNumberTrHtml(row) {
+  renderNumberTrHtml(row: number) {
+    let intro = this.renderProps.renderNumberIntroHtml(row, this.dayTable)
+
     return '' +
       '<tr>' +
-        (this.isRtl ? '' : this.renderNumberIntroHtml(row)) +
+        (this.isRtl ? '' : intro) +
         this.renderNumberCellsHtml(row) +
-        (this.isRtl ? this.renderNumberIntroHtml(row) : '') +
+        (this.isRtl ? intro : '') +
       '</tr>'
   }
 
 
-  renderIntroHtml() {
-    return ''
-  }
-
-
-  renderHeadIntroHtml() {
-    return this.renderIntroHtml()
-  }
-
-
-  renderNumberIntroHtml(row) {
-    return this.renderIntroHtml()
-  }
-
-
-  renderBgIntroHtml() {
-    return this.renderIntroHtml()
-  }
-
-
   renderNumberCellsHtml(row) {
     let { dayTable } = this
     let htmls = []
@@ -314,7 +307,7 @@ export default class DayGrid extends StandardDateComponent {
     let classes
     let weekCalcFirstDow
 
-    if (!isDayNumberVisible && !this.cellWeekNumbersVisible) {
+    if (!isDayNumberVisible && !this.renderProps.cellWeekNumbersVisible) {
       // no numbers in day cell (week number must be along the side)
       return '<td></td>' //  will create an empty space above events :(
     }
@@ -322,7 +315,7 @@ export default class DayGrid extends StandardDateComponent {
     classes = getDayClasses(date, this.props.dateProfile, this.context)
     classes.unshift('fc-day-top')
 
-    if (this.cellWeekNumbersVisible) {
+    if (this.renderProps.cellWeekNumbersVisible) {
       weekCalcFirstDow = dateEnv.weekDow
     }
 
@@ -333,7 +326,7 @@ export default class DayGrid extends StandardDateComponent {
         ) +
       '>'
 
-    if (this.cellWeekNumbersVisible && (date.getUTCDay() === weekCalcFirstDow)) {
+    if (this.renderProps.cellWeekNumbersVisible && (date.getUTCDay() === weekCalcFirstDow)) {
       html += buildGotoAnchorHtml(
         view,
         { date: date, type: 'week' },

src/basic/DayGridEventRenderer.ts

@@ -141,7 +141,7 @@ export default class DayGridEventRenderer extends SimpleDayGridEventRenderer {
 
       emptyCellsUntil(colCnt) // finish off the row
 
-      let introHtml = dayGrid.renderIntroHtml()
+      let introHtml = dayGrid.renderProps.renderIntroHtml()
       if (introHtml) {
         if (dayGrid.isRtl) {
           appendToElement(tr, introHtml)

src/basic/DayGridFillRenderer.ts

@@ -65,7 +65,7 @@ export default class DayGridFillRenderer extends FillRenderer {
       trEl.appendChild(createElement('td', { colSpan: colCnt - endCol }))
     }
 
-    let introHtml = dayGrid.renderIntroHtml()
+    let introHtml = dayGrid.renderProps.renderIntroHtml()
     if (introHtml) {
       if (dayGrid.isRtl) {
         appendToElement(trEl, introHtml)

src/list/ListView.ts

@@ -7,8 +7,10 @@ import ListEventRenderer from './ListEventRenderer'
 import { DateMarker, addDays, startOfDay } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
 import { DateRange, intersectRanges } from '../datelib/date-range'
-import { DateProfile } from '../DateProfileGenerator'
+import DateProfileGenerator, { DateProfile } from '../DateProfileGenerator'
 import { buildGotoAnchorHtml } from '../component/date-rendering'
+import { ComponentContext } from '../component/Component'
+import { ViewSpec } from '../structs/view-spec'
 
 /*
 Responsible for the scroller, and forwarding event-related actions into the "grid".
@@ -22,7 +24,8 @@ export default class ListView extends View {
   dayRanges: DateRange[] // start/end of each day
 
 
-  initialize() {
+  constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement) {
+    super(context, viewSpec, dateProfileGenerator, parentEl)
 
     this.eventRenderer = new ListEventRenderer(this)
     this.slicingType = 'all-day'