[REACT] Multiday event is displayed multiple times in week view

[saramh]

Hello bryntum folks,

I'm using https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/EventRenderer#config-eventRenderer function to display a custom layout for events. I noticed that for multiday events (with property allDay as true or false), the custom elements get displayed in all the day cells of the event. In this case I can see in the dom there are multiple elements for the name:

bryntum1.png (31.01 KiB) Viewed 286 times

However, the monthview using a very similar custom rendering config displays the multiday events correctly:

bryntum2.png (35.97 KiB) Viewed 286 times

Could somebody provide any insight into this? Do I have to check what cells the custom event should be rendered manually? but why on the monthview we have the correct behaviour?

Thanks a lot

[marcio]

Hey saramh,

Thanks for reaching out.

Could you please add more context on how to reproduce the behavior that you're describing? I tried to reproduce in our basic example https://bryntum.com/products/calendar/examples/basic/ with the snippet that I'm sharing here, but didn't get the same result.

    modeDefaults: {
        eventRenderer: (ev) => {
            if(ev.eventRecord.name === 'Hackathon 2020') {
                return 'Hackathon 2020 multiday'
            }
            return ev.name
        }
    },

[saramh]

Hey Marcio,

Thanks for your response, my code looks like something like this:

 //...calendarConfig,
 modes: {
 	week: {
 		eventRenderer: ({eventRecord, renderData}) => weekViewEventRenderer(eventRecord, renderData),
 		showTime: false,
 	}
 }
 
 // weekViewEventRenderer
 const weekViewEventRenderer = (eventRecord, renderData) =>{
 		renderData.style = {
			...renderData.style,
			opacity: "unset",
		}

	renderData.bodyStyle = {
		...renderData.bodyStyle,
		padding: "4px 8px",
		width: "100%",
	}
	
	return DomHelper.createElement({
		class: {
		//.....
		},
		style: {
			//.......
		},
		children: [
		// ..... custom content
		]
		})
 }

As an additional detail, I'm using version 5.5.3.
Appreciate the help,
Cheers

[saramh]

After further investigation, I noticed that when the event is clicked and has focus, I see the correct layout displayed in the event:

bryntumCalendarIssue.gif (143.54 KiB) Viewed 264 times

but the issue persists once the element loses focus,

Thanks

[marcio]

Hey saramh,

I tried to reproduce it with the snippet that you shared. That is caused because of the following line

renderData.style = {
       ...renderData.style,
       opacity: "unset",  // --> this line
   }

It displays correctly if you comment/remove the opacity: "unset", rule.

[saramh]

I can confirm, that removing the opacity change fixes the behaviour. I'm just curious, do you know why removing the opacity would cause such issue?
And thank you very much for your help Marcio!

[marcio]

Hey saramh,

I checked with our team, and we have that the opacity rule is to keep accessibility for screen readers, but as visually we don't need them, we hide with the opacity rule.

[saramh]

thanks lot Marcio