move bg event rendering out of EventRenderer

src/agenda/TimeGridEventRenderer.ts

@@ -16,8 +16,8 @@ export default class TimeGridEventRenderer extends EventRenderer {
   fullTimeFormat: DateFormatter
 
 
-  constructor(timeGrid, fillRenderer) {
-    super(timeGrid, fillRenderer)
+  constructor(timeGrid) {
+    super(timeGrid)
     this.timeGrid = timeGrid
 
     this.fullTimeFormat = createFormatter({

src/basic/DayGrid.ts

@@ -366,6 +366,14 @@ export default class DayGrid extends DateComponent {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
+  filterBgEventRanges(bgEventRanges) {
+    // don't render timed background events
+    return bgEventRanges.filter(function(eventRange) {
+      return eventRange.def.allDay
+    })
+  }
+
+
   // Unrenders all events currently rendered on the grid
   unrenderEvents() {
     this.removeSegPopover() // removes the "more.." events popover

src/basic/DayGridEventRenderer.ts

@@ -14,22 +14,12 @@ export default class DayGridEventRenderer extends EventRenderer {
   rowStructs: any // an array of objects, each holding information about a row's foreground event-rendering
 
 
-  constructor(dayGrid, fillRenderer) {
-    super(dayGrid, fillRenderer)
+  constructor(dayGrid) {
+    super(dayGrid)
     this.dayGrid = dayGrid
   }
 
 
-  renderBgSegs(segs: Seg[]) {
-    // don't render timed background events
-    segs = segs.filter(function(seg) {
-      return seg.eventRange.def.allDay
-    })
-
-    return super.renderBgSegs(segs)
-  }
-
-
   // Renders the given foreground event segments onto the grid
   renderFgSegs(segs: Seg[]) {
     let rowStructs = this.rowStructs = this.renderSegRows(segs)

src/component/DateComponent.ts

@@ -1,7 +1,7 @@
 import Component, { ComponentContext } from './Component'
 import { DateProfile } from '../DateProfileGenerator'
 import { EventStore, expandRecurring } from '../structs/event-store'
-import { EventUiHash, EventRenderRange, computeEventDefUis, sliceEventStore, computeEventDefUi } from './event-rendering'
+import { EventUiHash, EventRenderRange, computeEventDefUis, sliceEventStore, computeEventDefUi, hasBgRendering, filterSegsViaEls } from './event-rendering'
 import { DateSpan } from '../structs/date-span'
 import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import { createDuration, Duration } from '../datelib/duration'
@@ -80,8 +80,8 @@ export default class DateComponent extends Component<DateComponentProps> {
       this.fillRenderer = new this.fillRendererClass(this)
     }
 
-    if (this.eventRendererClass) { // fillRenderer is optional -----v
-      this.eventRenderer = new this.eventRendererClass(this, this.fillRenderer)
+    if (this.eventRendererClass) {
+      this.eventRenderer = new this.eventRendererClass(this)
     }
 
     if (this.mirrorRendererClass && this.eventRenderer) {
@@ -284,11 +284,43 @@ export default class DateComponent extends Component<DateComponentProps> {
   }
 
   renderEventRanges(eventRanges: EventRenderRange[]) {
-    if (this.eventRenderer) {
-      this.eventRenderer.rangeUpdated() // poorly named now
-      this.eventRenderer.renderSegs(
-        this.eventRangesToSegs(eventRanges)
-      )
+    if (this.eventRenderer || this.fillRenderer) {
+
+      let bgRanges = []
+      let fgRanges = []
+
+      for (let eventRange of eventRanges) {
+        if (hasBgRendering(eventRange.ui)) {
+          bgRanges.push(eventRange)
+        } else {
+          fgRanges.push(eventRange)
+        }
+      }
+
+      if (this.eventRenderer) {
+        this.eventRenderer.rangeUpdated() // poorly named now
+        this.eventRenderer.renderSegs(
+          this.eventRangesToSegs(fgRanges)
+        )
+      }
+
+      if (this.fillRenderer) {
+        bgRanges = this.filterBgEventRanges(bgRanges)
+
+        this.fillRenderer.renderSegs('bgEvent', this.eventRangesToSegs(bgRanges), {
+          getClasses: (seg) => {
+            return seg.eventRange.ui.classNames.concat([ 'fc-bgevent' ])
+          },
+          getCss: (seg) => {
+            return {
+              'background-color': seg.eventRange.ui.backgroundColor
+            }
+          },
+          filterSegs: (segs) => {
+            return filterSegsViaEls(this.view, segs, false)
+          }
+        })
+      }
 
       let calendar = this.calendar
       if (!calendar.state.loadingLevel) { // avoid initial empty state while pending
@@ -297,17 +329,27 @@ export default class DateComponent extends Component<DateComponentProps> {
     }
   }
 
+  filterBgEventRanges(bgEventRanges) {
+    return bgEventRanges
+  }
+
   unrenderEvents() {
     if (this.eventRenderer) {
-      this.triggerWillRemoveSegs(this.eventRenderer.getSegs())
+      this.triggerWillRemoveSegs(this.eventRenderer.fgSegs || [])
       this.eventRenderer.unrender()
     }
+
+    if (this.fillRenderer) {
+      this.triggerWillRemoveSegs(this.fillRenderer.renderedSegsByType['bgEvent'] || [])
+      this.fillRenderer.unrender('bgEvent')
+    }
   }
 
   computeEventsSize() {
     if (this.fillRenderer) {
       this.fillRenderer.computeSize('bgEvent')
     }
+
     if (this.eventRenderer) {
       this.eventRenderer.computeFgSizes()
     }
@@ -576,11 +618,10 @@ export default class DateComponent extends Component<DateComponentProps> {
   }
 
   getAllEventSegs(): Seg[] {
-    if (this.eventRenderer) {
-      return this.eventRenderer.getSegs()
-    } else {
-      return []
-    }
+    return [].concat(
+      this.eventRenderer ? (this.eventRenderer.fgSegs || []) : [],
+      this.fillRenderer ? (this.fillRenderer.renderedSegsByType['bgEvent'] || []) : []
+    )
   }
 
 

src/component/event-rendering.ts

@@ -6,6 +6,9 @@ import { mapHash } from '../util/object'
 import { parseClassName } from '../util/html'
 import { Duration } from '../datelib/duration'
 import { computeVisibleDayRange } from '../util/misc'
+import { Seg } from './DateComponent'
+import View from '../View'
+import EventApi from '../api/EventApi'
 
 export interface EventUi {
   startEditable: boolean
@@ -128,6 +131,51 @@ export function hasBgRendering(ui: EventUi) {
   return ui.rendering === 'background' || ui.rendering === 'inverse-background'
 }
 
+export function filterSegsViaEls(view: View, segs: Seg[], isMirror) {
+
+  if (view.hasPublicHandlers('eventRender')) {
+    segs = segs.filter(function(seg) {
+      let custom = view.publiclyTrigger('eventRender', [
+        {
+          event: new EventApi(
+            view.calendar,
+            seg.eventRange.def,
+            seg.eventRange.instance
+          ),
+          isMirror,
+          isStart: seg.isStart,
+          isEnd: seg.isEnd,
+          // TODO: include seg.range once all components consistently generate it
+          el: seg.el,
+          view
+        }
+      ])
+
+      if (custom === false) { // means don't render at all
+        return false
+      } else if (custom && custom !== true) {
+        seg.el = custom
+      }
+
+      return true
+    })
+  }
+
+  for (let seg of segs) {
+    setElSeg(seg.el, seg)
+  }
+
+  return segs
+}
+
+function setElSeg(el: HTMLElement, seg: Seg) {
+  (el as any).fcSeg = seg
+}
+
+export function getElSeg(el: HTMLElement): Seg | null {
+  return (el as any).fcSeg || null
+}
+
 
 // UI Props
 // ----------------------------------------------------------------------------------------------------