Setting custom html for time header in react

Asked by Viktor Eriksson
5 years ago.

I'm trying to set a custom html for the time header. Trying to add a left and right arrow so I can go to previous and next month/week etc. But args.header.html in onBeforeTimeHeaderRender only outputs [object Object] if setting a react-html/jsx-object:

args.header.html = <div><i className={'fa fa-chevron-left'} style= onClick={()=>previous()}......

To output the correct html I can just set args.header.html to a html-string but my methods wont be able to execute.

I have also tried using ReactDOM.render:

let test = <div><i className={'fa fa-chevron-left'} onClick={()=>previous()}...
let realHtml = document.createElement("div");
ReactDOM.render(test, realHtml)
args.header.html = realHtml;

But that only outputs [object HTMLDivElement]

capture.png

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

You can insert a React component using onBeforeTimeHeaderDomAdd:

onBeforeTimeHeaderDomAdd: args => { args.element = <jsx>;  }

See also a related tutorial (on rendering JSX components in row headers):
https://code.daypilot.org/18688/react-scheduler-rendering-jsx-components-in-row-header

Comment posted by Viktor Eriksson
5 years ago.

I have now looked at this method, but I'm not sure how to use it. I can see no information about current cell, like what the "text" should be. It just contains: args.element, args.start/level/end. Where args.element is null.

If I just experiment and try to set args.element = <div>asd</div>

I get the following error in the browser console:
The above error occurred in the <div> component:
in div (at Statistics.tsx:136)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1375
r @ backend.js:6
logCapturedError @ react-dom.development.js:20888
logError @ react-dom.development.js:20924
update.callback @ react-dom.development.js:22134
callCallback @ react-dom.development.js:13541
commitUpdateEffects @ react-dom.development.js:13581
commitUpdateQueue @ react-dom.development.js:13569
...
Show 2 more frames
react-dom.development.js:10564 Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Comment posted by Viktor Eriksson
5 years ago.

I am having serious problems with this method :)

I have approx 3 levels of time headers, year, month day. I would like to go to next or previous year/month with the help of two clickable elements that I would like to add. But no matter how I do they wont appear.

I notice that there are two divs in my time-header-cell and in one of the divs I can see my element but it is somehow marked with display:none

After removing the check if it is first or second level of time header I notice it starts to output my element. But not for all columns, it seems to skip the first and last one (furthest to the left/right).
So if i'm looking at a week it shows me my "previous-button" but only for days 2-6 and not 1 and 7(depending on the scrollbar). I now notice that that might have something to do with the floating labels, it is shown when I start scrolling. Perhaps the problem with the div for level 0 and 1 is related to this...

I cant attach images in a comment it seems like :(

Comment posted by Viktor Eriksson
5 years ago.

I'm also trying to get the args.header.areas to work but that doesn't seem to do anything. I see it is implemeted for calendar, is it for scheduler ?

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Setting custom html for time header in react

Products

Learn

Get Support

DayPilot Pro