Our powerful JS Calendar component
Hi,
i have this mode config:
day: {
showResourceAvatars : 'first',
allDayEvents : {
fullWeek : false
},
eventRenderer : (eventRecord: any, renderData: any) => {
if (eventRecord.eventRecord.orderCompact) {
return `
<div style="display: flex; flex-direction: column; height: 60%;">
<div class="row">
<span class="b-event-name" style="flex-grow: 1;">
${StringHelper.encodeHtml(eventRecord.eventRecord.name)}
</span>
</div>
<div class="row">
<span class="rounded-label d-flex justify-content-center pb-2" style="color: white; >
${StringHelper.encodeHtml(eventRecord.eventRecord.orderCompact.order_status_name)}
</span>
</div>
</div>
`;
}
else {
return `
<span class="b-event-name">${StringHelper.encodeHtml(eventRecord.eventRecord.name)}</span>
`;
}
}
},
but when events are rendered it only shows the html code from the renderer, if i comment out the showResourceAvatars it shows correctly
how can i configure this to have showResourceAvatars = true and add the status label ?
-
Attachments
-
- events with resources not working
- Screenshot 2024-01-23 at 14.14.56.png (92.82 KiB) Viewed 648 times
This looks like it would benefit greatly from using DomConfig object. I will try to create an example from your code...
It's a more expressive and readable way of making content:
https://codepen.io/Animal-Nige/pen/dyrzJEv?editors=0010
And much easier to make complex, conditionalized DOM. For example class
may be specified as an object:
class : {
'compact-event' : eventRecord.isCompact
}
So if the property value is truthy, the prop name is added as a class. Making up a big string object for any complex HTML is a nightmare.
That's why this whole framework concept is a nonsense.
Hm. Not calling the renderer now I added a resource. Will check it.
Thanks for this !
tried with this setup:
day: {
showResourceAvatars : 'last',
allDayEvents : {
fullWeek : false
},
xeventRenderer: (eventRecord: any, renderData: any) => {
if (eventRecord.eventRecord.orderCompact) {
return {
style:
'display: flex; flex-direction: column; height: 60%',
children: [
{
class: 'row',
children: [
{
tag: 'span',
class: 'b-event-name',
style: 'flex-grow: 1',
text: eventRecord.eventRecord.name
}
]
},
{
class: 'row',
children: [
{
tag: 'span',
class:
'rounded-label d-flex justify-content-center pb-2',
style: 'color: red',
text:
eventRecord.eventRecord.orderCompact
.order_status_name
}
]
}
]
};
} else {
return {
tag: 'span',
class: 'b-event-name foo bar',
text: StringHelper.encodeHtml(eventRecord.name)
};
}
}
},
but the lable is not showing up. see image....
-
Attachments
-
- Screenshot 2024-01-23 at 16.04.55.png (152.78 KiB) Viewed 609 times
I'm fixing this right now. The avatar rendering doesn't share well with using an eventRenderer
.
If you can post up some test data here, I can get a test case together which should look like what you want.
Obviously, we don't need the images. The fallback initials will be fine in a test.
OK, both avatar modes coexist with a custom eventRenderer in tests:
- Screenshot 2024-01-23 at 17.44.32.png (142.31 KiB) Viewed 575 times
- Screenshot 2024-01-23 at 17.43.58.png (138.81 KiB) Viewed 575 times
Okei, can you see what is wrong with my last config ? Cant Get it to display label and avatar :S