config DateComponent in constructors

src/agenda/TimeGrid.ts

@@ -78,6 +78,11 @@ export default class TimeGrid extends DateComponent {
   constructor(context: ComponentContext, headContainerEl: HTMLElement, el: HTMLElement) {
     super(context, el)
 
+    this.eventRenderer = new TimeGridEventRenderer(this)
+    this.mirrorRenderer = new TimeGridMirrorRenderer(this)
+    this.fillRenderer = new TimeGridFillRenderer(this)
+    this.slicingType = 'timed'
+
     this.processOptions()
 
     this.headContainerEl = headContainerEl // already created by called! where content is inserted directly!
@@ -671,10 +676,5 @@ export default class TimeGrid extends DateComponent {
 TimeGrid.prototype.isInteractable = true
 TimeGrid.prototype.doesDragMirror = true
 TimeGrid.prototype.doesDragHighlight = false
-TimeGrid.prototype.slicingType = 'timed'
-
-TimeGrid.prototype.eventRendererClass = TimeGridEventRenderer
-TimeGrid.prototype.mirrorRendererClass = TimeGridMirrorRenderer
-TimeGrid.prototype.fillRendererClass = TimeGridFillRenderer
 
 DayTableMixin.mixInto(TimeGrid)

src/basic/DayGrid.ts

@@ -49,7 +49,8 @@ export default class DayGrid extends DateComponent {
   breakOnWeeks: DayTableInterface['breakOnWeeks']
 
   view: View // TODO: make more general and/or remove
-  mirrorRenderer: any
+
+  eventRenderer: DayGridEventRenderer
 
   cellWeekNumbersVisible: boolean = false // display week numbers in day cell?
 
@@ -74,6 +75,11 @@ export default class DayGrid extends DateComponent {
   constructor(context, headerContainerEl, el) {
     super(context, el)
 
+    this.eventRenderer = new DayGridEventRenderer(this)
+    this.mirrorRenderer = new DayGridMirrorRenderer(this)
+    this.fillRenderer = new DayGridFillRenderer(this)
+    this.slicingType = 'all-day'
+
     this.headerContainerEl = headerContainerEl
   }
 
@@ -762,10 +768,5 @@ export default class DayGrid extends DateComponent {
 DayGrid.prototype.isInteractable = true
 DayGrid.prototype.doesDragMirror = false
 DayGrid.prototype.doesDragHighlight = true
-DayGrid.prototype.slicingType = 'all-day'
-
-DayGrid.prototype.eventRendererClass = DayGridEventRenderer
-DayGrid.prototype.mirrorRendererClass = DayGridMirrorRenderer
-DayGrid.prototype.fillRendererClass = DayGridFillRenderer
 
 DayTableMixin.mixInto(DayGrid)

src/basic/DayTile.ts

@@ -9,6 +9,7 @@ import { Rect, pointInsideRect } from '../util/geom'
 import { addDays, DateMarker } from '../datelib/marker'
 import { removeElement } from '../util/dom-manip'
 import { EventInteractionUiState } from '../interactions/event-interaction-state'
+import { ComponentContext } from 'src/component/Component'
 
 /*
 props:
@@ -26,6 +27,13 @@ export default class DayTile extends DateComponent {
   offsetTracker: OffsetTracker // TODO: abstraction for tracking dims of whole element rect
 
 
+  constructor(context: ComponentContext, el: HTMLElement) {
+    super(context, el)
+
+    this.eventRenderer = new DayTileEventRenderer(this)
+  }
+
+
   render(props) {
     let dateId = this.subrender('renderFrame', [ props.date ])
     let evId = this.subrender('renderCoolSegs', [ props.segs ], 'unrenderCoolSegs')
@@ -159,4 +167,3 @@ export class DayTileEventRenderer extends SimpleDayGridEventRenderer {
 
 DayTile.prototype.isInteractable = true
 DayTile.prototype.useEventCenter = false
-DayTile.prototype.eventRendererClass = DayTileEventRenderer

src/component/DateComponent.ts

@@ -12,6 +12,8 @@ import browserContext from '../common/browser-context'
 import { elementClosest, removeElement } from '../util/dom-manip'
 import { isSelectionValid, isEventsValid } from '../validation'
 import EventApi from '../api/EventApi'
+import FgEventRenderer from './renderers/FgEventRenderer'
+import FillRenderer from './renderers/FillRenderer'
 
 export interface DateComponentProps {
   dateProfile: DateProfile | null
@@ -44,7 +46,7 @@ export default class DateComponent extends Component<DateComponentProps> {
   useEventCenter: boolean // for dragging geometry
   doesDragMirror: boolean // for events that ORIGINATE from this component
   doesDragHighlight: boolean // for events that ORIGINATE from this component
-  slicingType: 'timed' | 'all-day' | null
+  slicingType: 'timed' | 'all-day' | null = null
   fgSegSelector: string // lets eventRender produce elements without fc-event class
   bgSegSelector: string
 
@@ -53,13 +55,9 @@ export default class DateComponent extends Component<DateComponentProps> {
   // TODO: port isTimeScale into same system?
   largeUnit: any
 
-  eventRendererClass: any
-  mirrorRendererClass: any
-  fillRendererClass: any
-
-  eventRenderer: any
-  mirrorRenderer: any
-  fillRenderer: any
+  eventRenderer: FgEventRenderer
+  mirrorRenderer: FgEventRenderer
+  fillRenderer: FillRenderer
 
   el: HTMLElement // passed in to constructor
   needHitsDepth: number = 0
@@ -74,18 +72,6 @@ export default class DateComponent extends Component<DateComponentProps> {
     this.el = el
     this.nextDayThreshold = createDuration(this.opt('nextDayThreshold'))
 
-    if (this.fillRendererClass) {
-      this.fillRenderer = new this.fillRendererClass(this)
-    }
-
-    if (this.eventRendererClass) {
-      this.eventRenderer = new this.eventRendererClass(this)
-    }
-
-    if (this.mirrorRendererClass && this.eventRenderer) {
-      this.mirrorRenderer = new this.mirrorRendererClass(this)
-    }
-
     if (this.isInteractable) {
       browserContext.registerComponent(this)
     }
@@ -736,6 +722,5 @@ DateComponent.prototype.isInteractable = false
 DateComponent.prototype.useEventCenter = true
 DateComponent.prototype.doesDragMirror = false
 DateComponent.prototype.doesDragHighlight = false
-DateComponent.prototype.slicingType = null
 DateComponent.prototype.fgSegSelector = '.fc-event-container > *'
 DateComponent.prototype.bgSegSelector = '.fc-bgevent'

src/list/ListView.ts

@@ -24,6 +24,9 @@ export default class ListView extends View {
 
   initialize() {
 
+    this.eventRenderer = new ListEventRenderer(this)
+    this.slicingType = 'all-day'
+
     this.el.classList.add('fc-list-view')
 
     let listViewClassName = this.theme.getClass('listView')
@@ -228,7 +231,5 @@ export default class ListView extends View {
 
 }
 
-ListView.prototype.eventRendererClass = ListEventRenderer
 ListView.prototype.isInteractable = true
-ListView.prototype.slicingType = 'all-day'
 ListView.prototype.fgSegSelector = '.fc-list-item' // which elements accept event actions