render no args

packages-premium

@@ -1 +1 @@
-Subproject commit 42ac7f178870daed4663f45026e652360c5cf5a3
+Subproject commit 38a9e2d2d963ade13fd973065d615b573c40c957

packages/core/src/CalendarComponent.tsx

@@ -60,7 +60,8 @@ export class CalendarComponent extends Component<CalendarComponentProps, Calenda
   /*
   renders INSIDE of an outer div
   */
-  render(props: CalendarComponentProps, state: CalendarComponentState) {
+  render() {
+    let { props, state } = this
     let { toolbarConfig, theme, options } = props
 
     let toolbarProps = this.buildToolbarProps(

packages/core/src/Toolbar.tsx

@@ -1,7 +1,6 @@
 import { h } from './vdom'
 import { BaseComponent } from './vdom-util'
 import { ToolbarModel, ToolbarWidget } from './toolbar-parse'
-import { ComponentContext } from './component/ComponentContext'
 
 
 export interface ToolbarProps extends ToolbarContent {
@@ -20,8 +19,8 @@ export interface ToolbarContent {
 
 export class Toolbar extends BaseComponent<ToolbarProps> {
 
-  render(props: ToolbarProps) {
-    let { model } = props
+  render() {
+    let { model, extraClassName } = this.props
     let forceLtr = false
     let startContent, endContent
     let centerContent = model.center
@@ -41,7 +40,7 @@ export class Toolbar extends BaseComponent<ToolbarProps> {
     }
 
     let classNames = [
-      props.extraClassName || '',
+      extraClassName || '',
       'fc-toolbar',
       forceLtr ? 'fc-toolbar-ltr' : ''
     ]
@@ -80,8 +79,9 @@ interface ToolbarSectionProps extends ToolbarContent {
 
 class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
 
-  render(props: ToolbarSectionProps, state: {}, context: ComponentContext) {
-    let { theme } = context
+  render() {
+    let { props } = this
+    let { theme } = this.context
 
     return (
       <div className='fc-toolbar-chunk'>

packages/core/src/ViewContainer.tsx

@@ -16,18 +16,21 @@ export interface ViewContainerProps {
 // TODO: do function component?
 export class ViewContainer extends BaseComponent<ViewContainerProps> {
 
-  render(props: ViewContainerProps) {
+  render() {
+    let { props } = this
+    let { aspectRatio } = props
+
     let classNames = [
       'fc-view-harness',
-      (props.aspectRatio || props.liquid || props.height)
+      (aspectRatio || props.liquid || props.height)
         ? 'fc-view-harness-active' // harness controls the height
         : 'fc-view-harness-passive' // let the view do the height
     ]
     let height: CssDimValue = ''
     let paddingBottom: CssDimValue = ''
 
-    if (props.aspectRatio) {
-      paddingBottom = (1 / props.aspectRatio) * 100 + '%'
+    if (aspectRatio) {
+      paddingBottom = (1 / aspectRatio) * 100 + '%'
     } else {
       height = props.height || ''
     }

packages/core/src/common/DayCellRoot.tsx

@@ -48,7 +48,9 @@ export class DayCellRoot extends BaseComponent<DayCellRootProps> {
   buildClassNames = buildHookClassNameGenerator<DayCellHookProps>('dayCell')
 
 
-  render(props: DayCellRootProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
+
     let hookPropsOrigin: DayCellHookPropOrigin = {
       date: props.date,
       dateProfile: props.dateProfile,
@@ -95,7 +97,9 @@ export interface DayCellContentProps {
 
 export class DayCellContent extends BaseComponent<DayCellContentProps> {
 
-  render(props: DayCellContentProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
+
     let hookPropsOrigin: DayCellHookPropOrigin = {
       date: props.date,
       dateProfile: props.dateProfile,

packages/core/src/common/DayHeader.tsx

@@ -1,5 +1,4 @@
 import { BaseComponent } from '../vdom-util'
-import { ComponentContext } from '../component/ComponentContext'
 import { DateMarker } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
 import { computeFallbackHeaderFormat } from './table-utils'
@@ -24,8 +23,9 @@ export class DayHeader extends BaseComponent<DayHeaderProps> { // TODO: rename t
   createDayHeaderFormatter = memoize(createDayHeaderFormatter)
 
 
-  render(props: DayHeaderProps, state: {}, context: ComponentContext) {
-    let { dates, dateProfile, datesRepDistinctDays } = props
+  render() {
+    let { context } = this
+    let { dates, dateProfile, datesRepDistinctDays, renderIntro } = this.props
 
     let dayHeaderFormat = this.createDayHeaderFormatter(
       context.options.dayHeaderFormat,
@@ -36,7 +36,7 @@ export class DayHeader extends BaseComponent<DayHeaderProps> { // TODO: rename t
     return (
       <NowTimer unit='day' content={(nowDate: DateMarker, todayRange: DateRange) => (
         <tr>
-          {props.renderIntro && props.renderIntro()}
+          {renderIntro && renderIntro()}
           {dates.map((date) => (
             datesRepDistinctDays ?
               <TableDateCell

packages/core/src/common/EventRoot.tsx

@@ -1,6 +1,5 @@
 import { Seg } from '../component/DateComponent'
 import { ComponentChildren, h, Ref, createRef } from '../vdom'
-import { ComponentContext } from '../component/ComponentContext'
 import { EventApi } from '../api/EventApi'
 import { computeSegDraggable, computeSegStartResizable, computeSegEndResizable, setElSeg } from '../component/event-rendering'
 import { EventMeta, getSkinCss, getEventClassNames } from '../component/event-rendering'
@@ -40,7 +39,8 @@ export class EventRoot extends BaseComponent<EventRootProps> {
   elRef = createRef<HTMLElement>()
 
 
-  render(props: EventRootProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
     let { seg } = props
     let { eventRange } = seg
     let { ui } = eventRange

packages/core/src/common/StandardEvent.tsx

@@ -5,7 +5,6 @@ import { createFormatter } from '../datelib/formatting'
 import { buildSegTimeText, EventMeta } from '../component/event-rendering'
 import { EventRoot, MinimalEventProps } from './EventRoot'
 import { Seg } from '../component/DateComponent'
-import { ComponentContext } from '../component/ComponentContext'
 
 
 export interface StandardEventProps extends MinimalEventProps {
@@ -22,16 +21,16 @@ export interface StandardEventProps extends MinimalEventProps {
 // should not be a purecomponent
 export class StandardEvent extends BaseComponent<StandardEventProps> {
 
-  render(props: StandardEventProps, state: {}, context: ComponentContext) {
-    let { options } = context
+  render() {
+    let { props, context } = this
 
     // TODO: avoid createFormatter, cache!!!
     // SOLUTION: require that props.defaultTimeFormat is a real formatter, a top-level const,
     // which will require that defaultRangeSeparator be part of the DateEnv (possible already?),
     // and have options.eventTimeFormat be preprocessed.
     let timeFormat = createFormatter(
-      options.eventTimeFormat || props.defaultTimeFormat,
-      options.defaultRangeSeparator
+      context.options.eventTimeFormat || props.defaultTimeFormat,
+      context.options.defaultRangeSeparator
     )
 
     let timeText = buildSegTimeText(props.seg, timeFormat, context, props.defaultDisplayEventTime, props.defaultDisplayEventEnd)

packages/core/src/common/TableDateCell.tsx

@@ -1,7 +1,6 @@
 import { DateRange } from '../datelib/date-range'
 import { getDayClassNames, getDateMeta, DateMeta } from '../component/date-rendering'
 import { DateMarker, addDays } from '../datelib/marker'
-import { ComponentContext } from '../component/ComponentContext'
 import { h } from '../vdom'
 import { __assign } from 'tslib'
 import { DateFormatter } from '../datelib/DateFormatter'
@@ -37,13 +36,14 @@ const CLASS_NAME = 'fc-col-header-cell' // do the cushion too? no
 
 export class TableDateCell extends BaseComponent<TableDateCellProps> { // BAD name for this class now. used in the Header
 
-  render(props: TableDateCellProps, state: {}, context: ComponentContext) {
-    let { dateEnv, options } = context
+  render() {
+    let { dateEnv, options, theme, viewApi } = this.context
+    let { props } = this
     let { date, dateProfile } = props
     let dayMeta = getDateMeta(date, props.todayRange, null, dateProfile)
 
     let classNames = [ CLASS_NAME ].concat(
-      getDayClassNames(dayMeta, context.theme)
+      getDayClassNames(dayMeta, theme)
     )
     let text = dateEnv.format(date, props.dayHeaderFormat)
 
@@ -54,7 +54,7 @@ export class TableDateCell extends BaseComponent<TableDateCellProps> { // BAD na
 
     let hookProps: DateHeaderCellHookProps = {
       date: dateEnv.toDate(date),
-      view: context.viewApi,
+      view: viewApi,
       ...props.extraHookProps,
       text,
       ...dayMeta
@@ -103,14 +103,14 @@ export interface TableDowCellProps {
 
 export class TableDowCell extends BaseComponent<TableDowCellProps> {
 
-  render(props: TableDowCellProps, state: {}, context: ComponentContext) {
-    let { dow } = props
-    let { dateEnv } = context
+  render() {
+    let { props } = this
+    let { dateEnv, theme, viewApi } = this.context
 
-    let date = addDays(new Date(259200000), dow) // start with Sun, 04 Jan 1970 00:00:00 GMT
+    let date = addDays(new Date(259200000), props.dow) // start with Sun, 04 Jan 1970 00:00:00 GMT
 
     let dateMeta: DateMeta = {
-      dow,
+      dow: props.dow,
       isDisabled: false,
       isFuture: false,
       isPast: false,
@@ -119,7 +119,7 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
     }
 
     let classNames = [ CLASS_NAME ].concat(
-      getDayClassNames(dateMeta, context.theme),
+      getDayClassNames(dateMeta, theme),
       props.extraClassNames || []
     )
 
@@ -128,7 +128,7 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
     let hookProps: DateHeaderCellHookProps = {
       date,
       ...dateMeta,
-      view: context.viewApi,
+      view: viewApi,
       ...props.extraHookProps,
       text
     }

packages/core/src/common/ViewRoot.tsx

@@ -1,7 +1,6 @@
 import { ViewSpec } from '../structs/view-spec'
 import { MountHook, buildHookClassNameGenerator } from './render-hook'
 import { ComponentChildren, h, Ref } from '../vdom'
-import { ComponentContext } from '../component/ComponentContext'
 import { BaseComponent } from '../vdom-util'
 
 
@@ -17,7 +16,8 @@ export class ViewRoot extends BaseComponent<ViewRootProps> {
   buildClassNames = buildHookClassNameGenerator('view')
 
 
-  render(props: ViewRootProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
     let hookProps = { view: context.viewApi }
     let customClassNames = this.buildClassNames(hookProps, context)
 

packages/core/src/common/render-hook.tsx

@@ -34,16 +34,18 @@ export class RenderHook<HookProps> extends Component<RenderHookProps<HookProps>>
   private rootElRef = createRef()
 
 
-  render(props: RenderHookProps<HookProps>, state: {}, context: ComponentContext) {
+  render() {
+    let { name, hookProps, options, defaultContent, children } = this.props
+
     return (
-      <MountHook name={props.name} hookProps={props.hookProps} options={props.options} elRef={this.handleRootEl}>
+      <MountHook name={name} hookProps={hookProps} options={options} elRef={this.handleRootEl}>
         {(rootElRef) => (
-          <ContentHook name={props.name} hookProps={props.hookProps} options={props.options} defaultContent={props.defaultContent} backupElRef={this.rootElRef}>
-            {(innerElRef, innerContent) => props.children(
+          <ContentHook name={name} hookProps={hookProps} options={options} defaultContent={defaultContent} backupElRef={this.rootElRef}>
+            {(innerElRef, innerContent) => children(
               rootElRef,
               normalizeClassNames(
-                (props.options || context.options)[props.name ? props.name + 'ClassNames' : 'classNames'],
-                props.hookProps
+                (options || this.context.options)[name ? name + 'ClassNames' : 'classNames'],
+                hookProps
               ),
               innerElRef,
               innerContent
@@ -91,8 +93,8 @@ export class ContentHook<HookProps> extends Component<ContentHookProps<HookProps
   }
 
 
-  render(props: ContentHookProps<HookProps>) {
-    return props.children(this.innerElRef, this.renderInnerContent())
+  render() {
+    return this.props.children(this.innerElRef, this.renderInnerContent())
   }
 
 
@@ -175,8 +177,8 @@ export class MountHook<HookProps> extends Component<MountHookProps<HookProps>> {
   rootEl: HTMLElement
 
 
-  render(props: MountHookProps<HookProps>) {
-    return props.children(this.handleRootEl)
+  render() {
+    return this.props.children(this.handleRootEl)
   }
 
 

packages/core/src/scrollgrid/Scroller.tsx

@@ -26,10 +26,11 @@ export class Scroller extends BaseComponent<ScrollerProps> implements ScrollerLi
   private el: HTMLElement // TODO: just use this.base?
 
 
-  render(props: ScrollerProps) {
-    let className = [ 'fc-scroller' ]
+  render() {
+    let { props } = this
     let { liquid, liquidIsAbsolute } = props
     let isAbsolute = liquid && liquidIsAbsolute
+    let className = [ 'fc-scroller' ]
 
     if (liquid) {
       if (liquidIsAbsolute) {

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -1,5 +1,4 @@
 import { VNode, h } from '../vdom'
-import { ComponentContext } from '../component/ComponentContext'
 import { BaseComponent, setRef } from '../vdom-util'
 import { Scroller, OverflowValue } from './Scroller'
 import { RefMap } from '../util/RefMap'
@@ -49,7 +48,8 @@ export class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProps, Simpl
   }
 
 
-  render(props: SimpleScrollGridProps, state: SimpleScrollGridState, context: ComponentContext) {
+  render() {
+    let { props, state, context } = this
     let sectionConfigs = props.sections || []
     let cols = this.processCols(props.cols)
 

packages/daygrid/src/DayTable.tsx

@@ -48,16 +48,16 @@ export class DayTable extends DateComponent<DayTableProps, ComponentContext> {
   private tableRef = createRef<Table>()
 
 
-  render(props: DayTableProps, state: {}, context: ComponentContext) {
-    let { dayTableModel } = props
+  render() {
+    let { props, context } = this
 
     return (
       <Table
         ref={this.tableRef}
         elRef={this.handleRootEl}
-        { ...this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, dayTableModel) }
+        { ...this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, props.dayTableModel) }
         dateProfile={props.dateProfile}
-        cells={dayTableModel.cells}
+        cells={props.dayTableModel.cells}
         colGroupNode={props.colGroupNode}
         tableMinWidth={props.tableMinWidth}
         renderRowIntro={props.renderRowIntro}

packages/daygrid/src/DayTableView.tsx

@@ -1,10 +1,8 @@
 import {
   h, createRef,
   DayHeader,
-  ComponentContext,
   DateProfileGenerator,
   DateProfile,
-  ViewProps,
   memoize,
   DaySeriesModel,
   DayTableModel,
@@ -21,8 +19,9 @@ export class DayTableView extends TableView {
   private tableRef = createRef<DayTable>()
 
 
-  render(props: ViewProps, state: {}, context: ComponentContext) {
-    let { options, dateProfileGenerator } = context
+  render() {
+    let { options, computedOptions, dateProfileGenerator } = this.context
+    let { props } = this
     let dayTableModel = this.buildDayTableModel(props.dateProfile, dateProfileGenerator)
 
     let headerContent = options.dayHeaders &&
@@ -45,7 +44,7 @@ export class DayTableView extends TableView {
         eventSelection={props.eventSelection}
         eventDrag={props.eventDrag}
         eventResize={props.eventResize}
-        nextDayThreshold={context.computedOptions.nextDayThreshold}
+        nextDayThreshold={computedOptions.nextDayThreshold}
         colGroupNode={contentArg.tableColGroupNode}
         tableMinWidth={contentArg.tableMinWidth}
         dayMaxEvents={options.dayMaxEvents}

packages/daygrid/src/MorePopover.tsx

@@ -1,4 +1,4 @@
-import { DateComponent, DateMarker, h, EventInstanceHash, ComponentContext, createFormatter, Hit, addDays, DateRange, getSegMeta, DayCellRoot, DayCellContent, DateProfile } from '@fullcalendar/core'
+import { DateComponent, DateMarker, h, EventInstanceHash, createFormatter, Hit, addDays, DateRange, getSegMeta, DayCellRoot, DayCellContent, DateProfile } from '@fullcalendar/core'
 import { TableSeg } from './TableSeg'
 import { TableBlockEvent } from './TableBlockEvent'
 import { TableListItemEvent } from './TableListItemEvent'
@@ -24,9 +24,10 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
   private popoverEl: HTMLElement
 
 
-  render(props: MorePopoverProps, state: {}, context: ComponentContext) {
-    let { options, dateEnv } = context
-    let { date, hiddenInstances, todayRange, dateProfile } = props
+  render() {
+    let { options, dateEnv } = this.context
+    let { props } = this
+    let { date, hiddenInstances, todayRange, dateProfile, selectedInstanceId } = props
     let title = dateEnv.format(date, createFormatter(options.dayPopoverFormat)) // TODO: cache formatter
 
     return (
@@ -63,7 +64,7 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
                     <TableListItemEvent
                       seg={seg}
                       isDragging={false}
-                      isSelected={instanceId === props.selectedInstanceId}
+                      isSelected={instanceId === selectedInstanceId}
                       defaultDisplayEventEnd={false}
                       {...getSegMeta(seg, todayRange)}
                     /> :
@@ -72,7 +73,7 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
                       isDragging={false}
                       isResizing={false}
                       isDateSelecting={false}
-                      isSelected={instanceId === props.selectedInstanceId}
+                      isSelected={instanceId === selectedInstanceId}
                       defaultDisplayEventEnd={false}
                       {...getSegMeta(seg, todayRange)}
                     />

packages/daygrid/src/Popover.tsx

@@ -1,6 +1,5 @@
 import {
-  h, ComponentChildren,
-  applyStyle, BaseComponent, ComponentContext, DelayedRunner, Ref, setRef
+  h, ComponentChildren, applyStyle, BaseComponent, DelayedRunner, Ref, setRef
 } from '@fullcalendar/core'
 
 
@@ -25,11 +24,12 @@ export class Popover extends BaseComponent<PopoverProps> {
   private repositioner = new DelayedRunner(this.updateSize.bind(this))
 
 
-  render(props: PopoverProps, state: {}, context: ComponentContext) {
-    let { theme } = context
+  render() {
+    let { theme } = this.context
+    let { props } = this
     let classNames = [
       'fc-popover',
-      context.theme.getClass('popover')
+      theme.getClass('popover')
     ].concat(
       props.extraClassNames || []
     )

packages/daygrid/src/Table.tsx

@@ -11,7 +11,6 @@ import {
   addDays,
   RefMap,
   setRef,
-  ComponentContext,
   DateRange,
   NowTimer,
   DateMarker,
@@ -71,9 +70,10 @@ export class Table extends DateComponent<TableProps, TableState> {
   private colPositions: PositionCache
 
 
-  render(props: TableProps, state: TableState, context: ComponentContext) {
+  render() {
+    let { props } = this
     let { dateProfile, dayMaxEventRows, dayMaxEvents, expandRows } = props
-    let { morePopoverState } = state
+    let { morePopoverState } = this.state
     let rowCnt = props.cells.length
 
     let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt)
@@ -82,7 +82,7 @@ export class Table extends DateComponent<TableProps, TableState> {
     let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt)
     let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt)
     let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt)
-    let buildMoreLinkText = this.buildBuildMoreLinkText(context.options.moreLinkText)
+    let buildMoreLinkText = this.buildBuildMoreLinkText(this.context.options.moreLinkText)
 
     let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true
 
@@ -150,10 +150,10 @@ export class Table extends DateComponent<TableProps, TableState> {
           </table>,
           (morePopoverState && morePopoverState.currentFgEventSegs === props.fgEventSegs) && // clear popover on event mod
             <MorePopover
-              date={state.morePopoverState.date}
+              date={morePopoverState.date}
               dateProfile={dateProfile}
-              segs={state.morePopoverState.allSegs}
-              alignmentEl={state.morePopoverState.dayEl}
+              segs={morePopoverState.allSegs}
+              alignmentEl={morePopoverState.dayEl}
               topAlignmentEl={rowCnt === 1 ? props.headerAlignElRef.current : null}
               onCloseClick={this.handleMorePopoverClose}
               selectedInstanceId={props.eventSelection}

packages/daygrid/src/TableBlockEvent.tsx

@@ -8,7 +8,9 @@ export interface TableBlockEventProps extends MinimalEventProps {
 
 export class TableBlockEvent extends BaseComponent<TableBlockEventProps> {
 
-  render(props: TableBlockEventProps) {
+  render() {
+    let { props } = this
+
     return (
       <StandardEvent
         {...props}

packages/daygrid/src/TableCell.tsx

@@ -4,7 +4,6 @@ import {
   h,
   DateMarker,
   DateComponent,
-  ComponentContext,
   CssDimValue,
   DateRange,
   buildNavLinkData,
@@ -76,8 +75,9 @@ const DEFAULT_WEEK_NUM_FORMAT = { week: 'narrow' }
 export class TableCell extends DateComponent<TableCellProps> {
 
 
-  render(props: TableCellProps, state: {}, context: ComponentContext) {
-    let { options } = context
+  render() {
+    let { options, viewApi } = this.context
+    let { props } = this
     let { date, dateProfile } = props
 
     return (
@@ -128,7 +128,7 @@ export class TableCell extends DateComponent<TableCellProps> {
                 {Boolean(props.moreCnt) &&
                   <div className='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
                     <RenderHook name='moreLink'
-                      hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.viewApi }}
+                      hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: viewApi }}
                       defaultContent={renderMoreLinkInner}
                     >
                       {(rootElRef, classNames, innerElRef, innerContent) => (
@@ -225,7 +225,9 @@ interface TableCellTopProps {
 
 class TableCellTop extends BaseComponent<TableCellTopProps> {
 
-  render(props: TableCellTopProps) {
+  render() {
+    let { props } = this
+
     return (
       <DayCellContent
         date={props.date}

packages/daygrid/src/TableListItemEvent.tsx

@@ -1,4 +1,4 @@
-import { h, BaseComponent, Seg, EventRoot, ComponentContext, createFormatter, buildSegTimeText, EventMeta, Fragment } from '@fullcalendar/core'
+import { h, BaseComponent, Seg, EventRoot, createFormatter, buildSegTimeText, EventMeta, Fragment } from '@fullcalendar/core'
 import { DEFAULT_TABLE_EVENT_TIME_FORMAT } from './event-rendering'
 
 
@@ -14,16 +14,16 @@ export interface DotTableEventProps {
 
 export class TableListItemEvent extends BaseComponent<DotTableEventProps> {
 
-  render(props: DotTableEventProps, state: {}, context: ComponentContext) {
-    let { options } = context
+  render() {
+    let { props, context } = this
 
     // TODO: avoid createFormatter, cache!!!
     // SOLUTION: require that props.defaultTimeFormat is a real formatter, a top-level const,
     // which will require that defaultRangeSeparator be part of the DateEnv (possible already?),
     // and have options.eventTimeFormat be preprocessed.
     let timeFormat = createFormatter(
-      options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT,
-      options.defaultRangeSeparator
+      context.options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT,
+      context.options.defaultRangeSeparator
     )
 
     let timeText = buildSegTimeText(props.seg, timeFormat, context, true, props.defaultDisplayEventEnd)

packages/daygrid/src/TableRow.tsx

@@ -8,7 +8,6 @@ import {
   mapHash,
   CssDimValue,
   DateRange,
-  ComponentContext,
   getSegMeta,
   DateProfile,
   Fragment,
@@ -71,7 +70,8 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
   }
 
 
-  render(props: TableRowProps, state: TableRowState, context: ComponentContext) {
+  render() {
+    let { props, state, context } = this
     let colCnt = props.cells.length
 
     let businessHoursByCol = splitSegsByFirstCol(props.businessHourSegs, colCnt)

packages/list/src/ListView.tsx

@@ -8,7 +8,6 @@ import {
   DateRange,
   intersectRanges,
   DateProfile,
-  ComponentContext,
   EventUiHash,
   EventRenderRange,
   sliceEventStore,
@@ -36,7 +35,9 @@ export class ListView extends DateComponent<ViewProps> {
   private eventStoreToSegs = memoize(this._eventStoreToSegs)
 
 
-  render(props: ViewProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
+
     let extraClassNames = [
       'fc-list',
       context.theme.getClass('bordered'),

packages/list/src/ListViewEventRow.tsx

@@ -13,14 +13,14 @@ const DEFAULT_TIME_FORMAT = {
 
 export class ListViewEventRow extends BaseComponent<MinimalEventProps> {
 
-  render(props: MinimalEventProps, state: {}, context: ComponentContext) {
-    let { options } = context
+  render() {
+    let { props, context } = this
     let { seg } = props
 
     // TODO: avoid createFormatter, cache!!! see TODO in StandardEvent
     let timeFormat = createFormatter(
-      options.eventTimeFormat || DEFAULT_TIME_FORMAT,
-      options.defaultRangeSeparator
+      context.options.eventTimeFormat || DEFAULT_TIME_FORMAT,
+      context.options.defaultRangeSeparator
     )
 
     return (

packages/list/src/ListViewHeaderRow.tsx

@@ -1,5 +1,5 @@
 import {
-  BaseComponent, DateMarker, createFormatter, ComponentContext, h, DateRange, getDateMeta,
+  BaseComponent, DateMarker, createFormatter, h, DateRange, getDateMeta,
   RenderHook, buildNavLinkData, DateHeaderCellHookProps, getDayClassNames, formatDayString
 } from '@fullcalendar/core'
 
@@ -18,10 +18,11 @@ interface HookProps extends DateHeaderCellHookProps { // doesn't enforce much si
 export class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowProps> {
 
 
-  render(props: ListViewHeaderRowProps, state: {}, context: ComponentContext) {
-    let { theme, dateEnv, options } = context
-    let { dayDate } = props
-    let dayMeta = getDateMeta(dayDate, props.todayRange)
+  render() {
+    let { dayDate, todayRange } = this.props
+    let { theme, dateEnv, options, viewApi } = this.context
+
+    let dayMeta = getDateMeta(dayDate, todayRange)
     let mainFormat = createFormatter(options.listDayFormat) // TODO: cache
     let sideFormat = createFormatter(options.listDaySideFormat) // TODO: cache
     let text = mainFormat ? dateEnv.format(dayDate, mainFormat) : '' // will ever be falsy?
@@ -33,7 +34,7 @@ export class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowProps> {
 
     let hookProps: HookProps = {
       date: dateEnv.toDate(dayDate),
-      view: context.viewApi,
+      view: viewApi,
       text,
       sideText,
       navLinkData,
@@ -41,7 +42,7 @@ export class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowProps> {
     }
 
     let classNames = [ 'fc-list-day' ].concat(
-      getDayClassNames(dayMeta, context.theme)
+      getDayClassNames(dayMeta, theme)
     )
 
     // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)

packages/timegrid/src/DayTimeCols.tsx

@@ -13,7 +13,6 @@ import {
   DateMarker,
   Slicer,
   Hit,
-  ComponentContext,
   NowTimer,
   CssDimValue,
   Duration
@@ -53,15 +52,17 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
   private timeColsRef = createRef<TimeCols>()
 
 
-  render(props: DayTimeColsProps, state: {}, context: ComponentContext) {
-    let { dateEnv, options } = context
+  render() {
+    let { props, context } = this
     let { dateProfile, dayTableModel } = props
-    let dayRanges = this.buildDayRanges(dayTableModel, dateProfile, dateEnv)
+
+    let isNowIndicator = context.options.nowIndicator
+    let dayRanges = this.buildDayRanges(dayTableModel, dateProfile, context.dateEnv)
 
     // give it the first row of cells
     return (
       <NowTimer // TODO: would move this further down hierarchy, but sliceNowDate needs it
-        unit={options.nowIndicator ? 'minute' : 'day'}
+        unit={isNowIndicator ? 'minute' : 'day'}
         content={(nowDate: DateMarker, todayRange: DateRange) => (
           <TimeCols
             ref={this.timeColsRef}
@@ -78,7 +79,7 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
             clientHeight={props.clientHeight}
             expandRows={props.expandRows}
             nowDate={nowDate}
-            nowIndicatorSegs={options.nowIndicator && this.slicer.sliceNowDate(nowDate, context, dayRanges)}
+            nowIndicatorSegs={isNowIndicator && this.slicer.sliceNowDate(nowDate, context, dayRanges)}
             todayRange={todayRange}
             onScrollTopRequest={props.onScrollTopRequest}
             forPrint={props.forPrint}

packages/timegrid/src/DayTimeColsView.tsx

@@ -1,12 +1,10 @@
 import {
   h,
   DateProfileGenerator, DateProfile,
-  ComponentContext,
   DayHeader,
   DaySeriesModel,
   DayTableModel,
   memoize,
-  ViewProps,
   ChunkContentCallbackArgs
 } from '@fullcalendar/core'
 import { DayTable } from '@fullcalendar/daygrid'
@@ -21,8 +19,9 @@ export class DayTimeColsView extends TimeColsView {
   private buildSlatMetas = memoize(buildSlatMetas)
 
 
-  render(props: ViewProps, state: {}, context: ComponentContext) {
-    let { options, computedOptions, dateEnv, dateProfileGenerator } = context
+  render() {
+    let { options, computedOptions, dateEnv, dateProfileGenerator } = this.context
+    let { props } = this
     let { dateProfile } = props
     let dayTableModel = this.buildTimeColsModel(dateProfile, dateProfileGenerator)
     let splitProps = this.allDaySplitter.splitProps(props)

packages/timegrid/src/TimeCol.tsx

@@ -1,4 +1,4 @@
-import { Ref, DateMarker, BaseComponent, ComponentContext, h, EventSegUiInteractionState, Seg, getSegMeta, DateRange, Fragment, DayCellRoot, NowIndicatorRoot, DayCellContent, BgEvent, renderFill, DateProfile } from '@fullcalendar/core'
+import { Ref, DateMarker, BaseComponent, h, EventSegUiInteractionState, Seg, getSegMeta, DateRange, Fragment, DayCellRoot, NowIndicatorRoot, DayCellContent, BgEvent, renderFill, DateProfile } from '@fullcalendar/core'
 import { TimeColsSeg } from './TimeColsSeg'
 import { TimeColsSlatsCoords } from './TimeColsSlatsCoords'
 import { computeSegCoords, computeSegVerticals } from './event-placement'
@@ -28,13 +28,14 @@ export interface TimeColProps {
 export class TimeCol extends BaseComponent<TimeColProps> {
 
 
-  render(props: TimeColProps, state: {}, context: ComponentContext) {
-    let { options } = context
+  render() {
+    let { props, context } = this
+    let isSelectMirror = context.options.selectMirror
 
     let mirrorSegs: Seg[] = // yuck
       (props.eventDrag && props.eventDrag.segs) ||
       (props.eventResize && props.eventResize.segs) ||
-      (options.selectMirror && props.dateSelectionSegs) ||
+      (isSelectMirror && props.dateSelectionSegs) ||
       []
 
     let interactionAffectedInstances = // TODO: messy way to compute this
@@ -60,7 +61,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
                     {},
                     Boolean(props.eventDrag),
                     Boolean(props.eventResize),
-                    Boolean(options.selectMirror)
+                    Boolean(isSelectMirror)
                     // TODO: pass in left/right instead of using only computeSegTopBottomCss
                   )}
                 </Fragment>
@@ -244,7 +245,9 @@ interface TimeColMiscProps { // should be given nowDate too??
 
 class TimeColMisc extends BaseComponent<TimeColMiscProps> {
 
-  render(props: TimeColMiscProps) {
+  render() {
+    let { props } = this
+
     return (
       <DayCellContent date={props.date} dateProfile={props.dateProfile} todayRange={props.todayRange} extraHookProps={props.extraHookProps}>
         {(innerElRef, innerContent) => (

packages/timegrid/src/TimeColEvent.tsx

@@ -10,10 +10,10 @@ const DEFAULT_TIME_FORMAT = {
 
 export class TimeColEvent extends BaseComponent<MinimalEventProps> {
 
-  render(props: MinimalEventProps) {
+  render() {
     return (
       <StandardEvent
-        {...props}
+        {...this.props}
         defaultTimeFormat={DEFAULT_TIME_FORMAT}
         extraClassNames={[ 'fc-timegrid-event', 'fc-v-event' ]}
       />

packages/timegrid/src/TimeCols.tsx

@@ -63,7 +63,9 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
   private colCoords: PositionCache
 
 
-  render(props: TimeColsProps, state: TimeColsState) {
+  render() {
+    let { props, state } = this
+
     return (
       <div className='fc-timegrid-body' ref={props.rootElRef} style={{
         // these props are important to give this wrapper correct dimensions for interactions

packages/timegrid/src/TimeColsContent.tsx

@@ -7,7 +7,6 @@ import {
   RefMap,
   createRef,
   PositionCache,
-  ComponentContext,
   memoize,
   DateRange,
   NowIndicatorRoot,
@@ -55,7 +54,8 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
   private cellElRefs = new RefMap<HTMLTableCellElement>()
 
 
-  render(props: TimeColsContentProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
     let nowIndicatorTop =
       context.options.nowIndicator &&
       props.slatCoords &&

packages/timegrid/src/TimeColsSlats.tsx

@@ -58,13 +58,13 @@ export class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
   private slatElRefs = new RefMap<HTMLTableRowElement>()
 
 
-  render(props: TimeColsSlatsProps, state: {}, context: ComponentContext) {
-    let { theme } = context
+  render() {
+    let { props, context } = this
 
     return (
       <div className='fc-timegrid-slots' ref={this.rootElRef}>
         <table
-          className={theme.getClass('table')}
+          className={context.theme.getClass('table')}
           style={{
             minWidth: props.tableMinWidth,
             width: props.clientWidth,
@@ -136,7 +136,8 @@ export interface TimeColsSlatsBodyProps {
 
 export class TimeColsSlatsBody extends BaseComponent<TimeColsSlatsBodyProps> {
 
-  render(props: TimeColsSlatsBodyProps, state: {}, context: ComponentContext) {
+  render() {
+    let { props, context } = this
     let { slatElRefs } = props
 
     return (

packages/timegrid/src/TimeColsView.tsx

@@ -330,8 +330,8 @@ interface TimeBodyAxisProps {
 
 class TimeBodyAxis extends BaseComponent<TimeBodyAxisProps> {
 
-  render(props: TimeBodyAxisProps) {
-    return props.slatMetas.map((slatMeta: TimeSlatMeta) => (
+  render() {
+    return this.props.slatMetas.map((slatMeta: TimeSlatMeta) => (
       <tr>
         <TimeColsAxisCell {...slatMeta} />
       </tr>