better fg renderer api

src/agenda/TimeGridEventRenderer.ts

@@ -1,34 +1,36 @@
 import { htmlEscape, cssToStr } from '../util/html'
 import { removeElement, applyStyle } from '../util/dom-manip'
 import { createFormatter, DateFormatter } from '../datelib/formatting'
-import EventRenderer, { buildSegCompareObj } from '../component/renderers/EventRenderer'
+import FgEventRenderer, { buildSegCompareObj } from '../component/renderers/FgEventRenderer'
 import { Seg } from '../component/DateComponent'
 import { isMultiDayRange, compareByFieldSpecs } from '../util/misc'
+import TimeGrid from './TimeGrid'
 
 /*
 Only handles foreground segs.
 Does not own rendering. Use for low-level util methods by TimeGrid.
 */
-export default class TimeGridEventRenderer extends EventRenderer {
+export default class TimeGridEventRenderer extends FgEventRenderer {
 
-  timeGrid: any
+  timeGrid: TimeGrid
   segsByCol: any
   fullTimeFormat: DateFormatter
 
 
-  constructor(timeGrid) {
-    super(timeGrid)
+  constructor(timeGrid: TimeGrid) {
+    super(timeGrid.context)
+
     this.timeGrid = timeGrid
 
     this.fullTimeFormat = createFormatter({
       hour: 'numeric',
       minute: '2-digit',
-      separator: this.opt('defaultRangeSeparator')
+      separator: this.context.options.defaultRangeSeparator
     })
   }
 
 
-  renderFgSegs(segs: Seg[]) {
+  attachSegs(segs: Seg[]) {
     this.renderFgSegsIntoContainers(segs, this.timeGrid.fgContainerEls)
   }
 
@@ -41,12 +43,10 @@ export default class TimeGridEventRenderer extends EventRenderer {
   }
 
 
-  unrenderFgSegs() {
-    if (this.fgSegs) { // hack
-      this.fgSegs.forEach(function(seg) {
-        removeElement(seg.el)
-      })
-    }
+  detachSegs(segs: Seg[]) {
+    segs.forEach(function(seg) {
+      removeElement(seg.el)
+    })
 
     this.segsByCol = null
   }
@@ -93,13 +93,13 @@ export default class TimeGridEventRenderer extends EventRenderer {
 
 
   // Renders the HTML for a single event segment's default rendering
-  fgSegHtml(seg: Seg) {
+  renderSegHtml(seg: Seg) {
     let eventRange = seg.eventRange
     let eventDef = eventRange.def
     let eventUi = eventRange.ui
     let allDay = eventDef.allDay
     let isDraggable = eventUi.startEditable
-    let isResizableFromStart = seg.isStart && eventUi.durationEditable && this.opt('eventResizableFromStart')
+    let isResizableFromStart = seg.isStart && eventUi.durationEditable && this.context.options.eventResizableFromStart
     let isResizableFromEnd = seg.isEnd && eventUi.durationEditable
     let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd)
     let skinCss = cssToStr(this.getSkinCss(eventUi))
@@ -246,7 +246,7 @@ export default class TimeGridEventRenderer extends EventRenderer {
       // put segments that are closer to initial edge first (and favor ones with no coords yet)
       { field: 'backwardCoord', order: 1 }
     ].concat(
-      this.view.eventOrderSpecs
+      this.context.view.eventOrderSpecs
     )
 
     objs.sort(function(obj0, obj1) {
@@ -280,10 +280,10 @@ export default class TimeGridEventRenderer extends EventRenderer {
   // Generates an object with CSS properties/values that should be applied to an event segment element.
   // Contains important positioning-related properties that should be applied to any event element, customized or not.
   generateFgSegHorizontalCss(seg: Seg) {
-    let shouldOverlap = this.opt('slotEventOverlap')
+    let shouldOverlap = this.context.options.slotEventOverlap
     let backwardCoord = seg.backwardCoord // the left side if LTR. the right side if RTL. floating-point
     let forwardCoord = seg.forwardCoord // the right side if LTR. the left side if RTL. floating-point
-    let props = this.timeGrid.generateSegVerticalCss(seg) // get top/bottom first
+    let props = this.timeGrid.generateSegVerticalCss(seg) as any // get top/bottom first
     let isRtl = this.timeGrid.isRtl
     let left // amount of space from left edge, a fraction of the total width
     let right // amount of space from right edge, a fraction of the total width

src/basic/DayGridEventRenderer.ts

@@ -1,27 +1,27 @@
-import { htmlEscape, cssToStr } from '../util/html'
 import { createElement, removeElement } from '../util/dom-manip'
-import EventRenderer from '../component/renderers/EventRenderer'
 import DayGrid from './DayGrid'
 import { Seg } from '../component/DateComponent'
+import SimpleDayGridEventRenderer from './SimpleDayGridEventRenderer'
 
 
 /* Event-rendering methods for the DayGrid class
 ----------------------------------------------------------------------------------------------------------------------*/
 
-export default class DayGridEventRenderer extends EventRenderer {
+export default class DayGridEventRenderer extends SimpleDayGridEventRenderer {
 
   dayGrid: DayGrid
   rowStructs: any // an array of objects, each holding information about a row's foreground event-rendering
 
 
-  constructor(dayGrid) {
-    super(dayGrid)
+  constructor(dayGrid: DayGrid) {
+    super(dayGrid.context)
+
     this.dayGrid = dayGrid
   }
 
 
   // Renders the given foreground event segments onto the grid
-  renderFgSegs(segs: Seg[]) {
+  attachSegs(segs: Seg[]) {
     let rowStructs = this.rowStructs = this.renderSegRows(segs)
 
     // append to each row's content skeleton
@@ -34,7 +34,7 @@ export default class DayGridEventRenderer extends EventRenderer {
 
 
   // Unrenders all currently rendered foreground event segments
-  unrenderFgSegs() {
+  detachSegs() {
     let rowStructs = this.rowStructs || []
     let rowStruct
 
@@ -208,80 +208,11 @@ export default class DayGridEventRenderer extends EventRenderer {
   }
 
 
-  // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
-  computeEventTimeFormat() {
-    return {
-      hour: 'numeric',
-      minute: '2-digit',
-      omitZeroMinute: true,
-      meridiem: 'narrow'
-    }
-  }
-
-
   // Computes a default `displayEventEnd` value if one is not expliclty defined
   computeDisplayEventEnd() {
     return this.dayGrid.colCnt === 1 // we'll likely have space if there's only one day
   }
 
-
-  // Builds the HTML to be used for the default element for an individual segment
-  fgSegHtml(seg: Seg) {
-    let eventRange = seg.eventRange
-    let eventDef = eventRange.def
-    let eventUi = eventRange.ui
-    let allDay = eventDef.allDay
-    let isDraggable = eventUi.startEditable
-    let isResizableFromStart = allDay && seg.isStart && eventUi.durationEditable && this.opt('eventResizableFromStart')
-    let isResizableFromEnd = allDay && seg.isEnd && eventUi.durationEditable
-    let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd)
-    let skinCss = cssToStr(this.getSkinCss(eventUi))
-    let timeHtml = ''
-    let timeText
-    let titleHtml
-
-    classes.unshift('fc-day-grid-event', 'fc-h-event')
-
-    // Only display a timed events time if it is the starting segment
-    if (seg.isStart) {
-      timeText = this.getTimeText(eventRange)
-      if (timeText) {
-        timeHtml = '<span class="fc-time">' + htmlEscape(timeText) + '</span>'
-      }
-    }
-
-    titleHtml =
-      '<span class="fc-title">' +
-        (htmlEscape(eventDef.title || '') || '&nbsp;') + // we always want one line of height
-      '</span>'
-
-    return '<a class="' + classes.join(' ') + '"' +
-        (eventDef.url ?
-          ' href="' + htmlEscape(eventDef.url) + '"' :
-          ''
-          ) +
-        (skinCss ?
-          ' style="' + skinCss + '"' :
-          ''
-          ) +
-      '>' +
-        '<div class="fc-content">' +
-          (this.component.isRtl ?
-            titleHtml + ' ' + timeHtml : // put a natural space in between
-            timeHtml + ' ' + titleHtml   //
-            ) +
-        '</div>' +
-        (isResizableFromStart ?
-          '<div class="fc-resizer fc-start-resizer"></div>' :
-          ''
-          ) +
-        (isResizableFromEnd ?
-          '<div class="fc-resizer fc-end-resizer"></div>' :
-          ''
-          ) +
-      '</a>'
-  }
-
 }
 
 

src/basic/DayTile.ts

@@ -1,5 +1,5 @@
 import DateComponent, { Seg } from '../component/DateComponent'
-import DayGridEventRenderer from './DayGridEventRenderer'
+import SimpleDayGridEventRenderer from './SimpleDayGridEventRenderer'
 import { htmlEscape } from '../util/html'
 import { createFormatter } from '../datelib/formatting'
 import { Hit } from '../interactions/HitDragging'
@@ -8,6 +8,7 @@ import { computeRect } from '../util/dom-geom'
 import { Rect, pointInsideRect } from '../util/geom'
 import { addDays, DateMarker } from '../datelib/marker'
 import { ComponentContext } from '../component/Component'
+import { removeElement } from '../util/dom-manip'
 
 export default class DayTile extends DateComponent {
 
@@ -50,8 +51,6 @@ export default class DayTile extends DateComponent {
 
     this.segContainerEl = this.el.querySelector('.fc-event-container')
 
-    // HACK
-    this.eventRenderer.rangeUpdated()
     this.eventRenderer.renderSegs(props.segs)
   }
 
@@ -100,13 +99,25 @@ export default class DayTile extends DateComponent {
 
 }
 
-// hack
-export class DayTileEventRenderer extends DayGridEventRenderer {
+export class DayTileEventRenderer extends SimpleDayGridEventRenderer {
 
-  // simply append the els the container element
-  renderFgSegs(segs: Seg[]) {
+  dayTile: DayTile
+
+  constructor(dayTile) {
+    super(dayTile.context)
+
+    this.dayTile = dayTile
+  }
+
+  attachSegs(segs: Seg[]) {
     for (let seg of segs) {
-      this.component.segContainerEl.appendChild(seg.el)
+      this.dayTile.segContainerEl.appendChild(seg.el)
+    }
+  }
+
+  detachSegs(segs: Seg[]) {
+    for (let seg of segs) {
+      removeElement(seg.el)
     }
   }
 
@@ -114,5 +125,4 @@ export class DayTileEventRenderer extends DayGridEventRenderer {
 
 DayTile.prototype.isInteractable = true
 DayTile.prototype.useEventCenter = false
-
 DayTile.prototype.eventRendererClass = DayTileEventRenderer

src/basic/SimpleDayGridEventRenderer.ts

@@ -0,0 +1,86 @@
+import { htmlEscape, cssToStr } from '../util/html'
+import FgEventRenderer from '../component/renderers/FgEventRenderer'
+import { Seg } from '../component/DateComponent'
+
+
+/* Event-rendering methods for the DayGrid class
+----------------------------------------------------------------------------------------------------------------------*/
+
+export default abstract class SimpleDayGridEventRenderer extends FgEventRenderer {
+
+
+  // Builds the HTML to be used for the default element for an individual segment
+  renderSegHtml(seg: Seg) {
+    let { options } = this.context
+    let eventRange = seg.eventRange
+    let eventDef = eventRange.def
+    let eventUi = eventRange.ui
+    let allDay = eventDef.allDay
+    let isDraggable = eventUi.startEditable
+    let isResizableFromStart = allDay && seg.isStart && eventUi.durationEditable && options.eventResizableFromStart
+    let isResizableFromEnd = allDay && seg.isEnd && eventUi.durationEditable
+    let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd)
+    let skinCss = cssToStr(this.getSkinCss(eventUi))
+    let timeHtml = ''
+    let timeText
+    let titleHtml
+
+    classes.unshift('fc-day-grid-event', 'fc-h-event')
+
+    // Only display a timed events time if it is the starting segment
+    if (seg.isStart) {
+      timeText = this.getTimeText(eventRange)
+      if (timeText) {
+        timeHtml = '<span class="fc-time">' + htmlEscape(timeText) + '</span>'
+      }
+    }
+
+    titleHtml =
+      '<span class="fc-title">' +
+        (htmlEscape(eventDef.title || '') || '&nbsp;') + // we always want one line of height
+      '</span>'
+
+    return '<a class="' + classes.join(' ') + '"' +
+        (eventDef.url ?
+          ' href="' + htmlEscape(eventDef.url) + '"' :
+          ''
+          ) +
+        (skinCss ?
+          ' style="' + skinCss + '"' :
+          ''
+          ) +
+      '>' +
+        '<div class="fc-content">' +
+          (options.dir === 'rtl' ?
+            titleHtml + ' ' + timeHtml : // put a natural space in between
+            timeHtml + ' ' + titleHtml   //
+            ) +
+        '</div>' +
+        (isResizableFromStart ?
+          '<div class="fc-resizer fc-start-resizer"></div>' :
+          ''
+          ) +
+        (isResizableFromEnd ?
+          '<div class="fc-resizer fc-end-resizer"></div>' :
+          ''
+          ) +
+      '</a>'
+  }
+
+
+  // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
+  computeEventTimeFormat() {
+    return {
+      hour: 'numeric',
+      minute: '2-digit',
+      omitZeroMinute: true,
+      meridiem: 'narrow'
+    }
+  }
+
+
+  computeDisplayEventEnd() {
+    return false // TODO: somehow consider the originating DayGrid's column count
+  }
+
+}

src/component/DateComponent.ts

@@ -7,7 +7,6 @@ import { EventInteractionUiState } from '../interactions/event-interaction-state
 import { createDuration, Duration } from '../datelib/duration'
 import { parseEventDef, createEventInstance } from '../structs/event'
 import { DateRange, rangeContainsRange } from '../datelib/date-range'
-import EmitterMixin from '../common/EmitterMixin'
 import { Hit } from '../interactions/HitDragging'
 import browserContext from '../common/browser-context'
 import { elementClosest, removeElement } from '../util/dom-manip'
@@ -63,7 +62,6 @@ export default class DateComponent extends Component<DateComponentProps> {
   fillRenderer: any
 
   el: HTMLElement // passed in to constructor
-  emitter: EmitterMixin = new EmitterMixin()
   needHitsDepth: number = 0
 
   // derived from options
@@ -298,7 +296,6 @@ export default class DateComponent extends Component<DateComponentProps> {
       }
 
       if (this.eventRenderer) {
-        this.eventRenderer.rangeUpdated() // poorly named now
         this.eventRenderer.renderSegs(
           this.eventRangesToSegs(fgRanges)
         )
@@ -335,7 +332,6 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   unrenderEvents() {
     if (this.eventRenderer) {
-      this.triggerWillRemoveSegs(this.eventRenderer.fgSegs || [])
       this.eventRenderer.unrender()
     }
 
@@ -619,7 +615,7 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   getAllEventSegs(): Seg[] {
     return [].concat(
-      this.eventRenderer ? (this.eventRenderer.fgSegs || []) : [],
+      this.eventRenderer ? (this.eventRenderer.segs) : [],
       this.fillRenderer ? (this.fillRenderer.renderedSegsByType['bgEvent'] || []) : []
     )
   }
@@ -724,7 +720,7 @@ export default class DateComponent extends Component<DateComponentProps> {
             isStart: seg.isStart,
             isEnd: seg.isEnd,
             el: seg.el,
-            view: this
+            view: this // ?
           }
         ])
       }
@@ -732,13 +728,13 @@ export default class DateComponent extends Component<DateComponentProps> {
   }
 
   triggerWillRemoveSegs(segs: Seg[]) {
+    let { calendar } = this
 
     for (let seg of segs) {
-      this.emitter.trigger('eventElRemove', seg.el)
+      calendar.trigger('eventElRemove', seg.el)
     }
 
     if (this.hasPublicHandlers('eventDestroy')) {
-      let calendar = this.calendar
 
       for (let seg of segs) {
         this.publiclyTrigger('eventDestroy', [
@@ -749,7 +745,7 @@ export default class DateComponent extends Component<DateComponentProps> {
               seg.eventRange.instance
             ),
             el: seg.el,
-            view: this
+            view: this // ?
           }
         ])
       }
@@ -763,7 +759,7 @@ export default class DateComponent extends Component<DateComponentProps> {
   isValidSegDownEl(el: HTMLElement) {
     return !this.props.eventDrag && !this.props.eventResize &&
       !elementClosest(el, '.fc-mirror') &&
-      !this.isInPopover(el)
+      !this.isInPopover(el) // how to determine if not in a sub-component???
   }
 
 

src/component/renderers/EventRenderer.ts → src/component/renderers/FgEventRenderer.ts

@@ -1,4 +1,3 @@
-import View from '../../View'
 import { DateMarker } from '../../datelib/marker'
 import { createFormatter, DateFormatter } from '../../datelib/formatting'
 import { htmlToElements } from '../../util/dom-manip'
@@ -6,48 +5,68 @@ import { compareByFieldSpecs } from '../../util/misc'
 import { EventRenderRange, EventUi, filterSegsViaEls } from '../event-rendering'
 import { Seg } from '../DateComponent'
 import { assignTo } from '../../util/object'
+import { ComponentContext } from '../Component'
 
 
-export default class EventRenderer {
+export default abstract class FgEventRenderer {
 
-  view: View
-  component: any
-
-  fgSegs: Seg[]
+  context: ComponentContext
 
   // derived from options
   eventTimeFormat: DateFormatter
   displayEventTime: boolean
   displayEventEnd: boolean
 
+  segs: Seg[] = []
+
+
+  constructor(context: ComponentContext) {
+    this.context = context
+  }
+
+
+  renderSegs(segs: Seg[]) {
+    this.rangeUpdated() // called too frequently :(
+
+    // render an `.el` on each seg
+    // returns a subset of the segs. segs that were actually rendered
+    segs = this.renderSegEls(segs, false)
 
-  constructor(component) {
-    this.view = component.view || component
-    this.component = component
+    this.segs = segs
+    this.attachSegs(segs)
+    this.context.view.triggerRenderedSegs(this.segs)
   }
 
 
-  opt(name) {
-    return this.view.opt(name)
+  unrender() {
+    this.context.view.triggerWillRemoveSegs(this.segs)
+    this.detachSegs(this.segs)
+    this.segs = []
   }
 
 
+  abstract renderSegHtml(seg: Seg): string
+  abstract attachSegs(segs: Seg[])
+  abstract detachSegs(segs: Seg[])
+
+
   // Updates values that rely on options and also relate to range
   rangeUpdated() {
+    let { options } = this.context
     let displayEventTime
     let displayEventEnd
 
     this.eventTimeFormat = createFormatter(
-      this.opt('eventTimeFormat') || this.computeEventTimeFormat(),
-      this.opt('defaultRangeSeparator')
+      options.eventTimeFormat || this.computeEventTimeFormat(),
+      options.defaultRangeSeparator
     )
 
-    displayEventTime = this.opt('displayEventTime')
+    displayEventTime = options.displayEventTime
     if (displayEventTime == null) {
       displayEventTime = this.computeDisplayEventTime() // might be based off of range
     }
 
-    displayEventEnd = this.opt('displayEventEnd')
+    displayEventEnd = options.displayEventEnd
     if (displayEventEnd == null) {
       displayEventEnd = this.computeDisplayEventEnd() // might be based off of range
     }
@@ -57,44 +76,9 @@ export default class EventRenderer {
   }
 
 
-  renderSegs(fgSegs: Seg[]) {
-
-    // render an `.el` on each seg
-    // returns a subset of the segs. segs that were actually rendered
-    fgSegs = this.renderFgSegEls(fgSegs, false)
-
-    if (this.renderFgSegs(fgSegs) !== false) { // no failure?
-      this.fgSegs = fgSegs
-    }
-
-    this.view.triggerRenderedSegs(this.fgSegs || [])
-  }
-
-
-  unrender() {
-    this.unrenderFgSegs(this.fgSegs || [])
-    this.fgSegs = null
-  }
-
-
-  // Renders foreground event segments onto the grid
-  renderFgSegs(segs: Seg[]): (boolean | void) {
-    // subclasses must implement
-    // segs already has rendered els, and has been filtered.
-
-    return false // signal failure if not implemented
-  }
-
-
-  // Unrenders all currently rendered foreground segments
-  unrenderFgSegs(segs: Seg[]) {
-    // subclasses must implement
-  }
-
-
   // Renders and assigns an `el` property for each foreground event segment.
   // Only returns segments that successfully rendered.
-  renderFgSegEls(segs: Seg[], isMirrors: boolean) {
+  renderSegEls(segs: Seg[], isMirrors: boolean) {
     let html = ''
     let i
 
@@ -102,7 +86,7 @@ export default class EventRenderer {
 
       // build a large concatenation of event segment HTML
       for (i = 0; i < segs.length; i++) {
-        html += this.fgSegHtml(segs[i])
+        html += this.renderSegHtml(segs[i])
       }
 
       // Grab individual elements from the combined HTML string. Use each as the default rendering.
@@ -115,19 +99,13 @@ export default class EventRenderer {
         }
       })
 
-      segs = filterSegsViaEls(this.view, segs, isMirrors)
+      segs = filterSegsViaEls(this.context.view, segs, isMirrors)
     }
 
     return segs
   }
 
 
-  // Generates the HTML for the default rendering of a foreground event segment. Used by renderFgSegEls()
-  fgSegHtml(seg: Seg) {
-    // subclasses should implement
-  }
-
-
   // Generic utility for generating the HTML classNames for an event segment's element
   getSegClasses(seg: Seg, isDraggable, isResizable) {
     let classes = [
@@ -177,7 +155,7 @@ export default class EventRenderer {
     forcedStartTzo?: number,
     forcedEndTzo?: number
 ) {
-    const dateEnv = this.view.calendar.dateEnv
+    let { dateEnv } = this.context
 
     if (formatter == null) {
       formatter = this.eventTimeFormat
@@ -234,7 +212,7 @@ export default class EventRenderer {
 
 
   sortEventSegs(segs): Seg[] {
-    let specs = this.view.eventOrderSpecs
+    let specs = this.context.view.eventOrderSpecs
     let objs = segs.map(buildSegCompareObj)
 
     objs.sort(function(obj0, obj1) {

src/component/renderers/FillRenderer.ts

@@ -18,6 +18,7 @@ export default class FillRenderer { // use for highlight, background events, bus
   }
 
 
+  // TODO: try to make props smallers
   renderSegs(type, segs: Seg[], props) {
     let renderedSegs = this.buildSegEls(type, segs, props) // assignes `.el` to each seg. returns successfully rendered segs
     let containerEls = this.attachSegEls(type, renderedSegs)

src/component/renderers/MirrorRenderer.ts

@@ -40,7 +40,7 @@ export default abstract class MirrorRenderer {
     let i
 
     // assigns each seg's el and returns a subset of segs that were rendered
-    segs = this.eventRenderer.renderFgSegEls(segs, true) // isMirrors=true
+    segs = this.eventRenderer.renderSegEls(segs, true) // isMirrors=true
 
     for (i = 0; i < segs.length; i++) {
       let classList = segs[i].el.classList

src/exports.ts

@@ -93,7 +93,7 @@ export { default as Calendar } from './Calendar'
 export { default as View } from './View'
 export { defineView, getViewConfig } from './ViewRegistry'
 export { default as DayTableMixin } from './component/DayTableMixin'
-export { default as EventRenderer } from './component/renderers/EventRenderer'
+export { default as FgEventRenderer } from './component/renderers/FgEventRenderer'
 export { default as FillRenderer } from './component/renderers/FillRenderer'
 export { default as MirrorRenderer } from './component/renderers/MirrorRenderer'
 export { default as AgendaView } from './agenda/AgendaView'

src/interactions/EventHovering.ts

@@ -23,12 +23,12 @@ export default class EventHovering {
       this.handleSegLeave
     )
 
-    component.emitter.on('eventElRemove', this.handleEventElRemove)
+    component.calendar.on('eventElRemove', this.handleEventElRemove)
   }
 
   destroy() {
     this.removeHoverListeners()
-    this.component.emitter.off('eventElRemove', this.handleEventElRemove)
+    this.component.calendar.off('eventElRemove', this.handleEventElRemove)
   }
 
   // for simulating an eventMouseLeave when the event el is destroyed while mouse is over it

src/list/ListEventRenderer.ts

@@ -1,28 +1,38 @@
 import { htmlEscape } from '../util/html'
-import EventRenderer from '../component/renderers/EventRenderer'
+import FgEventRenderer from '../component/renderers/FgEventRenderer'
 import ListView from './ListView'
 import { Seg } from '../component/DateComponent'
 import { isMultiDayRange } from '../util/misc'
 import { getAllDayHtml } from '../component/date-rendering'
 
-export default class ListEventRenderer extends EventRenderer {
+export default class ListEventRenderer extends FgEventRenderer {
 
-  component: ListView
+  listView: ListView
 
 
-  renderFgSegs(segs: Seg[]) {
+  constructor(listView: ListView) {
+    super(listView.context)
+
+    this.listView = listView
+  }
+
+
+  attachSegs(segs: Seg[]) {
     if (!segs.length) {
-      this.component.renderEmptyMessage()
+      this.listView.renderEmptyMessage()
     } else {
-      this.component.renderSegList(segs)
+      this.listView.renderSegList(segs)
     }
   }
 
+
+  detachSegs() {
+  }
+
+
   // generates the HTML for a single event row
-  fgSegHtml(seg: Seg) {
-    let view = this.view
-    let calendar = view.calendar
-    let theme = calendar.theme
+  renderSegHtml(seg: Seg) {
+    let { view, theme } = this.context
     let eventRange = seg.eventRange
     let eventDef = eventRange.def
     let eventInstance = eventRange.instance

src/list/ListView.ts

@@ -86,7 +86,7 @@ export default class ListView extends View {
     this.dayDates = dayDates
     this.dayRanges = dayRanges
 
-    // all real rendering happens in EventRenderer
+    // all real rendering happens in FgEventRenderer
   }