React Scheduler > Sticky time header (1st group only for now) on horizontal scroll

This is what Floating Time Headers feature does. It should be enabled by default, so it looks like you might have turned it off.

Hi Dan,

You are right. It was turned off due to this issue https://forums.daypilot.org/question/6710/scheduler-shows-different-values-than-what-being-rendered-b.

Do you have advice on how to go about this with css, since we render the time header using JSX?

Hi Andy,

You can provide the floating content (using args.header.text or args.header.html) in addition to the JSX. But as I see in your screenshot, the content isn’t too complex, so it might be easier to switch from JSX to plain HTML for the standard content as well.

Hi Dan,

There are future specs where we will need complex rendering (the current version in the screenshot is just the first version of our timeline feature) - hence we intentionally set it up to render JSX.

As for your advice, are you referring to something like this?

// Current 
onBeforeTimeHeaderDomAdd(args) {
  args.element = <TimeHeaderComponent />;
}

// To be added
onBeforeTimeHeaderRender(args) {
  args.header.text/html = <TimeHeaderComponent />;
}

Hi Andy,

Thanks for the update.

At this moment, only raw HTML would work. But please let me check if it is possible to inject the existing JSX into the floating headers. I’ll keep you updated.

Thank you, Dan!