move dateProfile out of context

packages/core/src/CalendarComponent.tsx

@@ -224,7 +224,8 @@ export class CalendarComponent extends Component<CalendarComponentProps, Calenda
     let { viewSpec } = props
 
     let viewProps: ViewProps = {
-      businessHours: this.parseBusinessHours(options.businessHours),
+      dateProfile: props.dateProfile,
+      businessHours: props.businessHours,
       eventStore: props.eventStore,
       eventUiBases: props.eventUiBases,
       dateSelection: props.dateSelection,

packages/core/src/View.ts

@@ -9,6 +9,7 @@ import { Duration } from './datelib/duration'
 
 
 export interface ViewProps {
+  dateProfile: DateProfile
   businessHours: EventStore
   eventStore: EventStore
   eventUiBases: EventUiHash

packages/core/src/common/DayCellRoot.tsx

@@ -7,12 +7,14 @@ import { formatDayString, createFormatter } from '../datelib/formatting'
 import { buildHookClassNameGenerator, MountHook, ContentHook } from './render-hook'
 import { ViewApi } from '../ViewApi'
 import { BaseComponent } from '../vdom-util'
+import { DateProfile } from '../DateProfileGenerator'
 
 
 const DAY_NUM_FORMAT = createFormatter({ day: 'numeric' })
 
 interface DayCellHookPropOrigin {
   date: DateMarker // generic
+  dateProfile: DateProfile
   todayRange: DateRange
   showDayNumber?: boolean // defaults to false
 }
@@ -28,6 +30,7 @@ export interface DayCellHookProps extends DateMeta {
 export interface DayCellRootProps {
   elRef?: Ref<any>
   date: DateMarker
+  dateProfile: DateProfile
   todayRange: DateRange
   showDayNumber?: boolean // defaults to false
   extraHookProps?: object
@@ -47,6 +50,7 @@ export class DayCellRoot extends BaseComponent<DayCellRootProps> {
   render(props: DayCellRootProps, state: {}, context: ComponentContext) {
     let hookPropsOrigin: DayCellHookPropOrigin = {
       date: props.date,
+      dateProfile: props.dateProfile,
       todayRange: props.todayRange,
       showDayNumber: props.showDayNumber
     }
@@ -77,6 +81,7 @@ export class DayCellRoot extends BaseComponent<DayCellRootProps> {
 
 export interface DayCellContentProps {
   date: DateMarker
+  dateProfile: DateProfile
   todayRange: DateRange
   showDayNumber?: boolean // defaults to false
   extraHookProps?: object
@@ -92,6 +97,7 @@ export class DayCellContent extends BaseComponent<DayCellContentProps> {
   render(props: DayCellContentProps, state: {}, context: ComponentContext) {
     let hookPropsOrigin: DayCellHookPropOrigin = {
       date: props.date,
+      dateProfile: props.dateProfile,
       todayRange: props.todayRange,
       showDayNumber: props.showDayNumber
     }
@@ -113,7 +119,7 @@ export class DayCellContent extends BaseComponent<DayCellContentProps> {
 function massageHooksProps(input: DayCellHookPropOrigin, context: ComponentContext): DayCellHookProps {
   let { dateEnv } = context
   let { date } = input
-  let dayMeta = getDateMeta(date, input.todayRange, null, context.dateProfile)
+  let dayMeta = getDateMeta(date, input.todayRange, null, input.dateProfile)
 
   return {
     date: dateEnv.toDate(date),

packages/core/src/common/DayHeader.tsx

@@ -8,9 +8,11 @@ import { TableDateCell, TableDowCell } from './TableDateCell'
 import { NowTimer } from '../NowTimer'
 import { DateRange } from '../datelib/date-range'
 import { memoize } from '../util/memoize'
+import { DateProfile } from 'fullcalendar'
 
 
 export interface DayHeaderProps {
+  dateProfile: DateProfile
   dates: DateMarker[]
   datesRepDistinctDays: boolean
   renderIntro?: () => VNode
@@ -23,7 +25,7 @@ export class DayHeader extends BaseComponent<DayHeaderProps> { // TODO: rename t
 
 
   render(props: DayHeaderProps, state: {}, context: ComponentContext) {
-    let { dates, datesRepDistinctDays } = props
+    let { dates, dateProfile, datesRepDistinctDays } = props
 
     let dayHeaderFormat = this.createDayHeaderFormatter(
       context.options.dayHeaderFormat,
@@ -40,6 +42,7 @@ export class DayHeader extends BaseComponent<DayHeaderProps> { // TODO: rename t
               <TableDateCell
                 key={date.toISOString()}
                 date={date}
+                dateProfile={dateProfile}
                 todayRange={todayRange}
                 colCnt={dates.length}
                 dayHeaderFormat={dayHeaderFormat}

packages/core/src/common/TableDateCell.tsx

@@ -9,10 +9,12 @@ import { BaseComponent } from '../vdom-util'
 import { RenderHook } from './render-hook'
 import { buildNavLinkData } from './nav-link'
 import { ViewApi } from '../ViewApi'
+import { DateProfile } from 'fullcalendar'
 
 
 export interface TableDateCellProps {
   date: DateMarker
+  dateProfile: DateProfile
   todayRange: DateRange
   colCnt: number
   dayHeaderFormat: DateFormatter
@@ -36,8 +38,8 @@ export class TableDateCell extends BaseComponent<TableDateCellProps> { // BAD na
 
   render(props: TableDateCellProps, state: {}, context: ComponentContext) {
     let { dateEnv, options } = context
-    let { date } = props
-    let dayMeta = getDateMeta(date, props.todayRange, null, context.dateProfile)
+    let { date, dateProfile } = props
+    let dayMeta = getDateMeta(date, props.todayRange, null, dateProfile)
 
     let classNames = [ CLASS_NAME ].concat(
       getDayClassNames(dayMeta, context.theme)

packages/core/src/component/ComponentContext.ts

@@ -5,11 +5,12 @@ import { DateEnv } from '../datelib/env'
 import { PluginHooks } from '../plugin-system'
 import { createContext } from '../vdom'
 import { ScrollResponder, ScrollRequestHandler } from '../ScrollResponder'
-import { DateProfile, DateProfileGenerator } from '../DateProfileGenerator'
+import { DateProfileGenerator } from '../DateProfileGenerator'
 import { ViewSpec } from '../structs/view-spec'
 import { ReducerContext } from '../reducers/ReducerContext'
 import { Action } from '../reducers/types'
 import { Emitter } from '../common/Emitter'
+import { CalendarState } from '../reducers/types'
 
 export const ComponentContextType = createContext<ComponentContext>({} as any) // for Components
 export type ResizeHandler = (force: boolean) => void
@@ -21,7 +22,6 @@ export interface ComponentContext extends ReducerContext {
   theme: Theme
   isRtl: boolean
   dateProfileGenerator: DateProfileGenerator
-  dateProfile: DateProfile
   viewSpec: ViewSpec
   viewApi: ViewApi
   addResizeHandler: (handler: ResizeHandler) => void
@@ -57,7 +57,6 @@ export function buildViewContext(
     ...reducerContext,
     viewSpec,
     viewApi,
-    dateProfile,
     dateProfileGenerator,
     theme,
     isRtl: options.direction === 'rtl',

packages/core/src/reducers/CalendarStateReducer.ts

@@ -8,7 +8,7 @@ import { StandardTheme } from '../theme/StandardTheme'
 import { EventSourceHash } from '../structs/event-source'
 import { buildViewSpecs, ViewSpec } from '../structs/view-spec'
 import { mapHash, isPropsEqual } from '../util/object'
-import { DateProfileGenerator, DateProfile } from '../DateProfileGenerator'
+import { DateProfileGenerator } from '../DateProfileGenerator'
 import { reduceViewType } from './view-type'
 import { reduceCurrentDate, getInitialDate } from './current-date'
 import { reduceDateProfile } from './date-profile'

packages/daygrid/src/DayTable.tsx

@@ -12,13 +12,15 @@ import {
   ComponentContext,
   RefObject,
   CssDimValue,
-  Hit
+  Hit,
+  DateProfile
 } from '@fullcalendar/core'
 import { Table } from './Table'
 import { TableSeg } from './TableSeg'
 
 
 export interface DayTableProps {
+  dateProfile: DateProfile,
   dayTableModel: DayTableModel
   nextDayThreshold: Duration
   businessHours: EventStore
@@ -53,7 +55,8 @@ export class DayTable extends DateComponent<DayTableProps, ComponentContext> {
       <Table
         ref={this.tableRef}
         elRef={this.handleRootEl}
-        { ...this.slicer.sliceProps(props, context.dateProfile, props.nextDayThreshold, context, dayTableModel) }
+        { ...this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, dayTableModel) }
+        dateProfile={props.dateProfile}
         cells={dayTableModel.cells}
         colGroupNode={props.colGroupNode}
         tableMinWidth={props.tableMinWidth}

packages/daygrid/src/DayTableView.tsx

@@ -22,12 +22,13 @@ export class DayTableView extends TableView {
 
 
   render(props: ViewProps, state: {}, context: ComponentContext) {
-    let { options, dateProfile, dateProfileGenerator } = context
-    let dayTableModel = this.buildDayTableModel(dateProfile, dateProfileGenerator)
+    let { options, dateProfileGenerator } = context
+    let dayTableModel = this.buildDayTableModel(props.dateProfile, dateProfileGenerator)
 
     let headerContent = options.dayHeaders &&
       <DayHeader
         ref={this.headerRef}
+        dateProfile={props.dateProfile}
         dates={dayTableModel.headerDates}
         datesRepDistinctDays={dayTableModel.rowCnt === 1}
       />
@@ -35,6 +36,7 @@ export class DayTableView extends TableView {
     let bodyContent = (contentArg: ChunkContentCallbackArgs) => (
       <DayTable
         ref={this.tableRef}
+        dateProfile={props.dateProfile}
         dayTableModel={dayTableModel}
         businessHours={props.businessHours}
         dateSelection={props.dateSelection}

packages/daygrid/src/MorePopover.tsx

@@ -1,4 +1,4 @@
-import { DateComponent, DateMarker, h, EventInstanceHash, ComponentContext, createFormatter, Hit, addDays, DateRange, getSegMeta, DayCellRoot, DayCellContent } from '@fullcalendar/core'
+import { DateComponent, DateMarker, h, EventInstanceHash, ComponentContext, createFormatter, Hit, addDays, DateRange, getSegMeta, DayCellRoot, DayCellContent, DateProfile } from '@fullcalendar/core'
 import { TableSeg } from './TableSeg'
 import { TableBlockEvent } from './TableBlockEvent'
 import { TableListItemEvent } from './TableListItemEvent'
@@ -8,6 +8,7 @@ import { hasListItemDisplay } from './event-rendering'
 
 export interface MorePopoverProps {
   date: DateMarker
+  dateProfile: DateProfile
   segs: TableSeg[]
   selectedInstanceId: string
   hiddenInstances: EventInstanceHash
@@ -25,11 +26,11 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
 
   render(props: MorePopoverProps, state: {}, context: ComponentContext) {
     let { options, dateEnv } = context
-    let { date, hiddenInstances, todayRange } = props
+    let { date, hiddenInstances, todayRange, dateProfile } = props
     let title = dateEnv.format(date, createFormatter(options.dayPopoverFormat)) // TODO: cache formatter
 
     return (
-      <DayCellRoot date={date} todayRange={todayRange} elRef={this.handlePopoverEl}>
+      <DayCellRoot date={date} dateProfile={dateProfile} todayRange={todayRange} elRef={this.handlePopoverEl}>
         {(rootElRef, dayClassNames, dataAttrs) => (
           <Popover
             elRef={rootElRef}
@@ -40,7 +41,7 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
             alignmentEl={props.alignmentEl}
             topAlignmentEl={props.topAlignmentEl}
           >
-            <DayCellContent date={date} todayRange={todayRange}>
+            <DayCellContent date={date} dateProfile={dateProfile} todayRange={todayRange}>
               {(innerElRef, innerContent) => (
                 innerContent &&
                   <div class='fc-more-popover-misc' ref={innerElRef}>{innerContent}</div>

packages/daygrid/src/Table.tsx

@@ -15,7 +15,8 @@ import {
   DateRange,
   NowTimer,
   DateMarker,
-  EventApi
+  EventApi,
+  DateProfile
 } from '@fullcalendar/core'
 import { TableSeg, splitSegsByRow, splitInteractionByRow } from './TableSeg'
 import { TableRow } from './TableRow'
@@ -25,6 +26,7 @@ import { MorePopover } from './MorePopover'
 
 export interface TableProps {
   elRef?: Ref<HTMLDivElement>
+  dateProfile: DateProfile
   cells: TableCellModel[][] // cells-BY-ROW
   renderRowIntro?: () => VNode
   colGroupNode: VNode
@@ -70,7 +72,7 @@ export class Table extends DateComponent<TableProps, TableState> {
 
 
   render(props: TableProps, state: TableState, context: ComponentContext) {
-    let { dayMaxEventRows, dayMaxEvents, expandRows } = props
+    let { dateProfile, dayMaxEventRows, dayMaxEvents, expandRows } = props
     let { morePopoverState } = state
     let rowCnt = props.cells.length
 
@@ -127,7 +129,7 @@ export class Table extends DateComponent<TableProps, TableState> {
                   showDayNumbers={rowCnt > 1}
                   showWeekNumbers={props.showWeekNumbers}
                   todayRange={todayRange}
-                  dateProfile={context.dateProfile}
+                  dateProfile={dateProfile}
                   cells={cells}
                   renderIntro={props.renderRowIntro}
                   businessHourSegs={businessHourSegsByRow[row]}
@@ -149,6 +151,7 @@ export class Table extends DateComponent<TableProps, TableState> {
           (morePopoverState && morePopoverState.currentFgEventSegs === props.fgEventSegs) && // clear popover on event mod
             <MorePopover
               date={state.morePopoverState.date}
+              dateProfile={dateProfile}
               segs={state.morePopoverState.allSegs}
               alignmentEl={state.morePopoverState.dayEl}
               topAlignmentEl={rowCnt === 1 ? props.headerAlignElRef.current : null}

packages/daygrid/src/TableCell.tsx

@@ -17,12 +17,14 @@ import {
   EventRenderRange,
   addDays,
   intersectRanges,
+  DateProfile,
 } from '@fullcalendar/core'
 import { TableSeg } from './TableSeg'
 
 
 export interface TableCellProps {
   date: DateMarker
+  dateProfile: DateProfile
   extraHookProps?: object
   extraDataAttrs?: object
   extraClassNames?: string[]
@@ -76,11 +78,12 @@ export class TableCell extends DateComponent<TableCellProps> {
 
   render(props: TableCellProps, state: {}, context: ComponentContext) {
     let { options } = context
-    let { date } = props
+    let { date, dateProfile } = props
 
     return (
       <DayCellRoot
         date={date}
+        dateProfile={dateProfile}
         todayRange={props.todayRange}
         showDayNumber={props.showDayNumber}
         extraHookProps={props.extraHookProps}
@@ -110,6 +113,7 @@ export class TableCell extends DateComponent<TableCellProps> {
               {!isDisabled &&
                 <TableCellTop
                   date={date}
+                  dateProfile={dateProfile}
                   showDayNumber={props.showDayNumber}
                   todayRange={props.todayRange}
                   extraHookProps={props.extraHookProps}
@@ -213,6 +217,7 @@ function resliceDaySegs(segs, dayDate) {
 
 interface TableCellTopProps {
   date: DateMarker
+  dateProfile: DateProfile
   showDayNumber: boolean
   todayRange: DateRange
   extraHookProps?: object
@@ -224,6 +229,7 @@ class TableCellTop extends BaseComponent<TableCellTopProps> {
     return (
       <DayCellContent
         date={props.date}
+        dateProfile={props.dateProfile}
         todayRange={props.todayRange}
         showDayNumber={props.showDayNumber}
         extraHookProps={props.extraHookProps}

packages/daygrid/src/TableRow.tsx

@@ -126,6 +126,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
               key={cell.key}
               elRef={this.cellElRefs.createRef(cell.key)}
               innerElRef={this.cellInnerElRefs.createRef(cell.key) /* FF <td> problem, but okay to use for left/right. TODO: rename prop */}
+              dateProfile={props.dateProfile}
               date={cell.date}
               showDayNumber={props.showDayNumbers || showWeekNumber /* for spacing, we need to force day-numbers if week numbers */}
               showWeekNumber={showWeekNumber}

packages/list/src/ListView.tsx

@@ -43,7 +43,7 @@ export class ListView extends DateComponent<ViewProps> {
       context.options.stickyHeaderDates !== false ? 'fc-list-sticky' : ''
     ]
 
-    let { dayDates, dayRanges } = this.computeDateVars(context.dateProfile)
+    let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile)
     let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges)
 
     return (
@@ -152,7 +152,7 @@ export class ListView extends DateComponent<ViewProps> {
       sliceEventStore(
         eventStore,
         eventUiBases,
-        this.context.dateProfile.activeRange,
+        this.props.dateProfile.activeRange,
         this.context.computedOptions.nextDayThreshold
       ).fg,
       dayRanges

packages/timegrid/src/DayTimeCols.tsx

@@ -24,6 +24,7 @@ import { TimeSlatMeta } from './TimeColsSlats'
 
 
 export interface DayTimeColsProps {
+  dateProfile: DateProfile
   dayTableModel: DayTableModel
   axis: boolean
   slotDuration: Duration
@@ -53,8 +54,8 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
 
 
   render(props: DayTimeColsProps, state: {}, context: ComponentContext) {
-    let { dateEnv, options, dateProfile } = context
-    let { dayTableModel } = props
+    let { dateEnv, options } = context
+    let { dateProfile, dayTableModel } = props
     let dayRanges = this.buildDayRanges(dayTableModel, dateProfile, dateEnv)
 
     // give it the first row of cells
@@ -67,6 +68,7 @@ export class DayTimeCols extends DateComponent<DayTimeColsProps> {
             rootElRef={this.handleRootEl}
             {...this.slicer.sliceProps(props, dateProfile, null, context, dayRanges)}
             axis={props.axis}
+            dateProfile={dateProfile}
             slatMetas={props.slatMetas}
             slotDuration={props.slotDuration}
             cells={dayTableModel.cells[0]}

packages/timegrid/src/DayTimeColsView.tsx

@@ -22,7 +22,8 @@ export class DayTimeColsView extends TimeColsView {
 
 
   render(props: ViewProps, state: {}, context: ComponentContext) {
-    let { options, computedOptions, dateEnv, dateProfile, dateProfileGenerator } = context
+    let { options, computedOptions, dateEnv, dateProfileGenerator } = context
+    let { dateProfile } = props
     let dayTableModel = this.buildTimeColsModel(dateProfile, dateProfileGenerator)
     let splitProps = this.allDaySplitter.splitProps(props)
     let slatMetas = this.buildSlatMetas(dateProfile.slotMinTime, dateProfile.slotMaxTime, options.slotLabelInterval, computedOptions.slotDuration, dateEnv)
@@ -31,6 +32,7 @@ export class DayTimeColsView extends TimeColsView {
     let headerContent = options.dayHeaders &&
       <DayHeader
         dates={dayTableModel.headerDates}
+        dateProfile={dateProfile}
         datesRepDistinctDays={true}
         renderIntro={dayMinWidth ? null : this.renderHeadAxis}
       />
@@ -38,6 +40,7 @@ export class DayTimeColsView extends TimeColsView {
     let allDayContent = options.allDaySlot && ((contentArg: ChunkContentCallbackArgs) => (
       <DayTable
         {...splitProps['allDay']}
+        dateProfile={dateProfile}
         dayTableModel={dayTableModel}
         nextDayThreshold={computedOptions.nextDayThreshold}
         tableMinWidth={contentArg.tableMinWidth}
@@ -56,6 +59,7 @@ export class DayTimeColsView extends TimeColsView {
       <DayTimeCols
         {...splitProps['timed']}
         dayTableModel={dayTableModel}
+        dateProfile={dateProfile}
         axis={!dayMinWidth}
         slotDuration={computedOptions.slotDuration}
         slatMetas={slatMetas}

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 } from '@fullcalendar/core'
+import { Ref, DateMarker, BaseComponent, ComponentContext, 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'
@@ -7,6 +7,7 @@ import { TimeColEvent } from './TimeColEvent'
 
 export interface TimeColProps {
   elRef?: Ref<HTMLTableCellElement>
+  dateProfile: DateProfile
   date: DateMarker
   nowDate: DateMarker
   todayRange: DateRange
@@ -42,7 +43,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
       {}
 
     return (
-      <DayCellRoot elRef={props.elRef} date={props.date} todayRange={props.todayRange} extraHookProps={props.extraHookProps}>
+      <DayCellRoot elRef={props.elRef} date={props.date} dateProfile={props.dateProfile} todayRange={props.todayRange} extraHookProps={props.extraHookProps}>
         {(rootElRef, classNames, dataAttrs) => (
           <td
             ref={rootElRef}
@@ -79,6 +80,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
             </div>
             <TimeColMisc
               date={props.date}
+              dateProfile={props.dateProfile}
               todayRange={props.todayRange}
               extraHookProps={props.extraHookProps}
             />
@@ -234,6 +236,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
 
 
 interface TimeColMiscProps { // should be given nowDate too??
+  dateProfile: DateProfile
   date: DateMarker
   todayRange: DateRange
   extraHookProps?: any
@@ -243,7 +246,7 @@ class TimeColMisc extends BaseComponent<TimeColMiscProps> {
 
   render(props: TimeColMiscProps) {
     return (
-      <DayCellContent date={props.date} todayRange={props.todayRange} extraHookProps={props.extraHookProps}>
+      <DayCellContent date={props.date} dateProfile={props.dateProfile} todayRange={props.todayRange} extraHookProps={props.extraHookProps}>
         {(innerElRef, innerContent) => (
           innerContent &&
             <div class='fc-timegrid-col-misc' ref={innerElRef}>{innerContent}</div>

packages/timegrid/src/TimeCols.tsx

@@ -12,7 +12,8 @@ import {
   ScrollResponder,
   ScrollRequest,
   DateRange,
-  Duration
+  Duration,
+  DateProfile
 } from '@fullcalendar/core'
 import { TableCellModel } from '@fullcalendar/daygrid' // TODO: good to use this interface?
 import { TimeColsSlats, TimeSlatMeta } from './TimeColsSlats'
@@ -23,6 +24,7 @@ import { TimeColsSeg } from './TimeColsSeg'
 
 export interface TimeColsProps {
   cells: TableCellModel[]
+  dateProfile: DateProfile
   slotDuration: Duration
   nowDate: DateMarker
   todayRange: DateRange
@@ -71,6 +73,7 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
       }}>
         <TimeColsSlats
           axis={props.axis}
+          dateProfile={props.dateProfile}
           slatMetas={props.slatMetas}
           clientWidth={props.clientWidth}
           minHeight={props.expandRows ? props.clientHeight : ''}
@@ -81,6 +84,7 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
         <TimeColsContent
           cells={props.cells}
           axis={props.axis}
+          dateProfile={props.dateProfile}
           businessHourSegs={props.businessHourSegs}
           bgEventSegs={props.bgEventSegs}
           fgEventSegs={props.fgEventSegs}
@@ -149,8 +153,9 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
 
 
   positionToHit(positionLeft, positionTop) {
-    let { dateProfile, dateEnv, computedOptions } = this.context
+    let { dateEnv, computedOptions } = this.context
     let { colCoords } = this
+    let { dateProfile } = this.props
     let { slatCoords } = this.state
     let { snapDuration, snapsPerSlot } = this.processSlotOptions(this.props.slotDuration, computedOptions.snapDuration)
 

packages/timegrid/src/TimeColsContent.tsx

@@ -10,7 +10,8 @@ import {
   ComponentContext,
   memoize,
   DateRange,
-  NowIndicatorRoot
+  NowIndicatorRoot,
+  DateProfile
 } from '@fullcalendar/core'
 import { TableCellModel } from '@fullcalendar/daygrid' // TODO: good to use this interface?
 import { TimeColsSeg, splitSegsByCol, splitInteractionByCol } from './TimeColsSeg'
@@ -21,6 +22,7 @@ import { TimeCol } from './TimeCol'
 export interface TimeColsContentProps {
   axis: boolean
   cells: TableCellModel[]
+  dateProfile: DateProfile
   nowDate: DateMarker
   todayRange: DateRange
   businessHourSegs: TimeColsSeg[]
@@ -84,6 +86,7 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
                 <TimeCol
                   key={cell.key}
                   elRef={this.cellElRefs.createRef(cell.key)}
+                  dateProfile={props.dateProfile}
                   date={cell.date}
                   nowDate={props.nowDate}
                   todayRange={props.todayRange}

packages/timegrid/src/TimeColsSlats.tsx

@@ -16,12 +16,14 @@ import {
   DateMarker,
   DateEnv,
   ComponentContextType,
-  RenderHook
+  RenderHook,
+  DateProfile
 } from '@fullcalendar/core'
 import { TimeColsSlatsCoords } from './TimeColsSlatsCoords'
 
 
 export interface TimeColsSlatsProps extends TimeColsSlatsContentProps {
+  dateProfile: DateProfile
   clientWidth: number | null
   minHeight: CssDimValue
   tableMinWidth: CssDimValue
@@ -110,7 +112,7 @@ export class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
             false,
             true // vertical
           ),
-          this.context.dateProfile,
+          this.props.dateProfile,
           props.slatMetas
         )
       )

packages/timegrid/src/TimeColsView.tsx

@@ -249,7 +249,8 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
 
 
   renderHeadAxis = () => {
-    let { options, dateProfile } = this.context
+    let { options } = this.context
+    let { dateProfile } = this.props
     let range = dateProfile.renderRange
     let dayCnt = diffDays(range.start, range.end)
     let navLinkData = (options.navLinks && dayCnt === 1) // only do in day views (to avoid doing in week views that dont need it)