I have a WeekView. I'm trying to use the eventRenderer() option to override the default positioning of events.
Here's the config that I'm binding to my <bryntum-calendar> component:
const calendarConfig = reactive({
modes: {
fourday: {
title: '4-Day',
type: 'week',
range: '4d',
eventRenderer(foo) {
foo.renderData.iconCls.add('b-fa-ambulance') // this works
foo.renderData.eventColor = 'purple' // this works
foo.renderData.style.fontWeight = 'bold' // this works
foo.renderData.style.left = '40px' // this does NOT work
},
},
},
})
As you can see, some of my changes to the renderData object are working as expected – but changes to the renderData.style.left property are not.
Why not? Are these values not meant to be manipulated? Is there some other way to accomplish what I'm trying to do?
Thanks.
Last edited by ocratravis on Fri Mar 31, 2023 2:54 pm, edited 1 time in total.
Thanks, Marcio. Unfortunately, the second suggestion (setting foo.renderData.style to a string) seems to be incorrect. I just tried it, and it doesn't work.
If I add console.log(foo.renderData) to my eventRenderer function, then it shows that renderData.style is an object:
Are you looking for a new type of event layout? Can you please share a screenshot / mockup of your desired result? It's not intended for the left position to be overridden like that but perhaps it's something we can discuss internally.
The vertical positioning of event boxes would not change – only their horizontal positioning.
I'm basically trying to divide the single-day hourly grid (.b-dayview-event-container) into multiple vertical "lanes", and then decide programmatically which "lane" each event should appear in.
So, all events of type A would appear in the left lane (i.e., on the left side of the grid); all events of type B would appear in the center; and all events of type C would appear on the right.
This is necessary due to the complexity of the data that I'm trying to display.