Fix Various Issues and Add Enhancements to Timeline Component

src/lib/Timeline.tsx

@@ -415,7 +415,7 @@ export default class ReactCalendarTimeline<
       (prevState.width * (prevState.visibleTimeStart - prevState.canvasTimeStart)) / oldZoom,
     )
 
-    if (componentScrollLeft !== scrollLeft) {
+    if (componentScrollLeft !== scrollLeft || this.scrollComponent!.scrollLeft !== scrollLeft) {
       this.scrollComponent!.scrollLeft = scrollLeft
       this.scrollHeaderRef!.scrollLeft = scrollLeft
     }

src/lib/headers/CustomHeader.tsx

@@ -181,8 +181,7 @@ class CustomHeader<Data> extends React.Component<CustomHeaderProps<Data>, State>
 
   render() {
     const props = this.getStateAndHelpers()
-    const Renderer = this.props.children
-    return <Renderer {...props} />
+    return this.props.children(props)
   }
 }
 

src/lib/headers/Interval.tsx

@@ -44,17 +44,16 @@ class Interval<Data> extends React.PureComponent<IntervalProps<Data>> {
     const { intervalText, interval, intervalRenderer, headerData } = this.props
     const Renderer = intervalRenderer
     if (Renderer) {
-      return (
-        <Renderer
-          getIntervalProps={this.getIntervalProps}
-          intervalContext={{
-            interval,
-            intervalText,
-          }}
-          data={headerData}
-        />
-      )
+      return Renderer({
+        getIntervalProps: this.getIntervalProps,
+        intervalContext: {
+          interval,
+          intervalText,
+        },
+        data: headerData,
+      })
     }
+
     const { key, ...rest } = this.getIntervalProps()
     return (
       <div

src/lib/headers/SidebarHeader.tsx

@@ -1,9 +1,9 @@
-import { ComponentType, CSSProperties, HTMLProps, PureComponent } from 'react'
+import { CSSProperties, HTMLProps, PureComponent, ReactNode } from 'react'
 import { useTimelineHeadersContext } from './HeadersContext'
 import { LEFT_VARIANT, RIGHT_VARIANT } from './constants'
 
 type SidebarHeaderProps = {
-  children: ComponentType<{ getRootProps: GetRootProps }>
+  children: (props: { getRootProps: GetRootProps }) => ReactNode
   rightSidebarWidth?: number
   leftSidebarWidth: number
   variant: typeof LEFT_VARIANT | typeof RIGHT_VARIANT
@@ -31,15 +31,14 @@ class SidebarHeader extends PureComponent<SidebarHeaderProps> {
 
   render() {
     const props = this.getStateAndHelpers()
-    const Renderer = this.props.children
-    return <Renderer {...props} />
+    return this.props.children(props)
   }
 }
 
 type GetRootProps = () => HTMLProps<HTMLDivElement>
 
 export type SidebarWrapperProps = {
-  children?: ComponentType<{ getRootProps: GetRootProps }>
+  children?: (props: { getRootProps: GetRootProps }) => ReactNode
   variant?: typeof LEFT_VARIANT | typeof RIGHT_VARIANT
   headerData?: any
 }

src/lib/utility/calendar.tsx

@@ -83,7 +83,10 @@ export function iterateTimes(
   }
 
   while (time.valueOf() < end) {
-    const nextTime = dayjs(time).add(timeSteps[unit] || 1, unit as dayjs.ManipulateType)
+    const nextTime = dayjs(time)
+      .add(timeSteps[unit] || 1, unit as dayjs.ManipulateType)
+      .startOf(unit)
+
     callback(time, nextTime)
     time = nextTime
   }