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

Add onClick functionality in onBeforeRowHeaderRender or onBeforeRowHeaderDomAdd

Asked by Anonymous
1 day ago.

We want to add `onClick` feature in DOM element inside `onBeforeRowHeaderRender` which renders html by using `row.html = ReactDOMServer.renderToString()`. But it does not work.

Hence we tried using `onBeforeRowHeaderDomAdd` and onClick event works as expected. But onBeforeRowHeaderDomAdd disables expandable tree styles.

Link: https://forums.daypilot.org/question/6099/onbeforerowheaderdomadd-disables-expandable-tree-styles

But if we enable it by using `args.target = ‘Text’` then our custom JSX code does not work and onClick also does not work. Is there any solution to this?

how-to javascript react react18
Answer posted by Dan Letecky [DayPilot]
1 day ago.

This seems to be a problem of some of the older releases. The latest version (2025.2.6442) should work fine with args.target = "Text";.

Could you please give it a try? Please let me know if the problem persists.

Comment posted by Anonymous
13 hours ago.

Thanks Dan. It’s better than before however in the UI, row header width and height does not auto adjust based on content length. Below is the image.

We have rowHeaderWidth and rowMinHeight property to use, however can we achieve this without explicitly updating the width and height similar like in onBeforeRowHeaderRender? Thanks

Comment posted by Dan Letecky [DayPilot]
7 hours ago.

The row height is calculated from eventHeight and the maximum number of overlapping events + it takes into account adjustments like rowMinHeight. So it doesn’t depend on the row header content.

There was a problem with automatic adjustment of the row header width when using custom JSX - React postpones the rendering and the content wasn’t available when the width was calculated.

Anyway - in the latest sandbox build (2025.2.6453) the width calculation should work fine with JSX in the row headers as well.

Please let me know if there is any problem.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):
Tools
E-mail notifications
Feed
Related Questions
onBeforeRowHeaderDomAdd disables expandable tree styles?
onClick should be onclick....
Row Header Auto Width
Camtasia 5.0 recording software disables bubble hover in DayPilot Calendar
Preventing right button of the mouse from selecting a TimeRange
Create custom column with DayPilot scheduler in angular 12
Setting styles of timescroll and resscroll
Scheduler: Click event resource
Group concurrent events first state
DayPilot Context menu submenu
Only allow users to edit their own events
Setting custom context Menu.
Setting custom html for time header in react
Calendar - Make delete icon stay on event

Products

Learn

Get Support

DayPilot Pro

Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.