As part of the Bryntum Scheduler Pro upgrader from Bryntum Scheduler, we had to remove the 'eventBodyTemplate'. We have a way to render events based on the business requirement.
eventBodyTemplate: (values) =>
values &&
values
.map(
(value) =>
`<div class="allocated-events" style="${value.eventColor} ${
value.bookingStyle
} left: ${value.left}px;width: ${value.width - 4}px"> ${
value.iconInfo
} ${value.name}</div>`
)
.join(''),This is what the code looks like. However, as per the documentation, I tried to return the same value in the 'eventRenderer' and all I could see empty events now.
eventRenderer({ eventRecord, renderData }) {
renderData.eventColor = '';
renderData.eventStyle = 'hollow';
renderData.style = `${eventRecord.data.eventStyle}`;
// getCoordinateFromDate gives us a px value in time axis, subtract events left from it to be within the event
const dateToPx = (date) =>
this.getCoordinateFromDate(date) - renderData.left;
// Calculate coordinates for all nested events and put in an array passed on to eventBodyTemplate
console.log('before');
if (!eventRecord.data.nestedBookingEvents) return [];
console.log('After');
const newValues = eventRecord.data.nestedBookingEvents.map(
(nestedEvent) => ({
left: dateToPx(
addMilliseconds(eventRecord.data.startDate, nestedEvent.startOffset)
),
width: dateToPx(
addMilliseconds(eventRecord.data.startDate, nestedEvent.endOffset)
),
name: eventRecord.data.name,
bookingStyle: nestedEvent.bookingStyle ? nestedEvent.bookingStyle : '',
iconInfo: getNestedEventIcon(eventRecord.data, nestedEvent),
eventColor: getNestedBookingColor(eventRecord.data, nestedEvent),
})
);
console.log(newValues);
console.log('^newValues');
let newTemplate = '';
newTemplate =
newValues &&
newValues
.map(
(value) =>
StringHelper.xss`<div class="allocated-events" style="${
value.eventColor
} ${value.bookingStyle} left: ${value.left}px;width: ${
value.width - 4
}px"> ${value.iconInfo} ${value.name}</div>`
)
.join('');
console.log(newTemplate);
console.log('^newTemplate');
return newTemplate;
},This is how the new event render looks like now. Could you please assist us? This is a functionality that is heavily used in our scheduler. Thanks.
