[REACT] Rendering React Components in the eventRenderer Function in Month Mode

[prasath]

Is it possible to render a React component in the eventRenderer function in Month mode?

[prasath]

Hi ,
PFA the screenshots for reference.

requirement

requirement for custom rendering.png (4.97 KiB) Viewed 318 times

method used in code

custom rendering 1.png (57.2 KiB) Viewed 318 times

method 2

custom rendering 2.png (70.13 KiB) Viewed 318 times

review and suggest us if any other way to render or correct us if any implementation is required further.

[tasnim]

Hi,

JSX is not supported in Calendar's eventRenderer. We already have a feature request for this here https://github.com/bryntum/support/issues/7340
For now please use the regular way.
 
I'll mention that you've asked for this feature request to increase the priority.

Best regards,
Tasnim

[prasath]

Hi Tasnim,
Thanks for the update.By the way how can we atleast render a normal html tag like structure if we want to show atleast a div element inside to show badge like item.Can you show a way to implement.Refer the image attached above for requirment.

[tasnim]

Hi,

Sure, Please check the code snippet below

			eventRenderer() {
				return '<div style="font-size:20px; font-weight:bold;">Hello</div>';
			}

And here is codepen demo for you https://codepen.io/dv-auntik/pen/YzoxbPY?editors=0010 so that you can see live results.

Best regards,
Tasnim

[Animal]

It appears you already know about eventRenderer. It is fully documented at https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/EventRenderer#config-eventRenderer

With lots of information and code snippets:

Screenshot 2024-08-09 at 15.23.54.png (594.89 KiB) Viewed 293 times

You can return an HTML string, or, simpler, a DomConfig object which represents DOM structure in a simple way. And Use CSS classes in there and your OWN CSS to make it look like you want:

Screenshot 2024-08-09 at 15.19.42.png (959.08 KiB) Viewed 293 times

[prasath]

Thanks Animal we have tried to customize to some extent.But its working now .