Extend group style from sidebars to horizontal lines

New developer here, I am able to style the left and right sidebars, how do you extend this to the middle of the calendar? Thanks

groupRenderer = ({group}) => {
  let bgColor = 'white'
  
  if (group.root == true) {
    bgColor = 'lightgray'
  }
  return (
    <div style={{backgroundColor:bgColor}}></div>
  )
}

[trevdor]

@Ilaiwi I thought the groupRenderer could only affect the content in the sidebar? Here, we’re trying to style the areas in .rct-scroll or perhaps .rct-horizontal-lines. Can groupRenderer modify those?

[trevdor]

I attempted to implement consistent row coloring across groups in the sidebar and through the timeline scroll area in this codesandbox in case it might help @capt-obvious or anyone else to settle this question.

For the demo, I apply a “highlight” class (provides the bright green background) to groups whose titles include the letter ‘e’ (could use any criteria, of course) The same class is applied to group headers in the groupRenderer. Then I add styling for that class in style.css.

If anyone has a chance to look at my sandbox (maybe @perfectstrong or @Ilaiwi?), I’m curious if there’s a better way to do this.

Seems like it might be helpful for the classNames returned from horizontalLineClassNamesForGroup to be applied to the Sidebar group rows as well. (Right now, I have to override some rct styles to get the custom rendered group to fill the entire sidebar because I don’t know of a way to apply a className to the sidebar div with classNames rct-sidebar-row rct-sidebar-row-[even|odd].)

Applying those classNames to the Sidebar rows could look like this: https://github.com/trevdor/react-calendar-timeline/pull/1/files#diff-d3d66df219d3e1cc2a8b662759fa30adR64