search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler shows different values than what being rendered by onBeforeTimeHeaderDomAdd

Asked by andy
5 hours ago.

Hello,

Issue: I have a placeholder component to render in `onBeforeTimeHeaderDomAdd`, but instead of showing the “TODO” placeholder like I intended, it shows the default formatted dates instead (circled in red).

Once I scroll to the right, those numbers are rendered with the correct “TODO” placeholder component, but then the next month/date shows the default formatted dates (ie: January 2026 will show “January 2026”, and not “TODO Month only label“ (our JSX).

This is my configuration object.

{
    "scale": "Week",
    "cellWidth": 267,
    "days": 365,
    "infiniteScrollingEnabled": true,
    "infiniteScrollingMargin": 21,
    "infiniteScrollingStepDays": 180,
    "timeHeaders": [
        {
            "groupBy": "Month"
        },
        {
            "groupBy": "Week"
        }
    ]
}

This is my snippet for `onBeforeTimeHeaderDomAdd`. We use this instead of `on…Render` because we need to render complex JSX, including custom format of the dates.


  const onBeforeTimeHeaderDomAdd = useCallback(
    (args) => {
      args.element = <TodoPlaceholderTimeHeader {...args} /> 
      // TODO - currently hard-coded with "TODO - [...] Label"
    },
    []
  );

Looking forward to the advice on going about this!

Answer posted by Dan Letecky [DayPilot]
5 hours ago.

This can happen if the floating time headers are enabled (they are by default). The Scheduler isn’t aware of the custom component content and it uses the default HTML value for the floating divs.

You can either turn the floating time headers off or provide the floating div content using onBeforeRowHeaderRender (args.header.html).

Comment posted by andy
4 hours ago.

This works, thank you!

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):