[ANGULAR] EventRenderer with show the option to show resourceAvatars

[ehc-between]

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 ?

[Animal]

This looks like it would benefit greatly from using DomConfig object. I will try to create an example from your code...

[Animal]

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.

[Animal]

Hm. Not calling the renderer now I added a resource. Will check it.

[ehc-between]

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....

[Animal]

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.

[Animal]

https://github.com/bryntum/support/issues/8337

[Animal]

OK, both avatar modes coexist with a custom eventRenderer in tests:

Screenshot 2024-01-23 at 17.44.32.png (142.31 KiB) Viewed 572 times

Screenshot 2024-01-23 at 17.43.58.png (138.81 KiB) Viewed 572 times

[ehc-between]

Okei, can you see what is wrong with my last config ? Cant Get it to display label and avatar :S

[Animal]

It's this bug: https://github.com/bryntum/support/issues/8337

You wil have to wait a few days for the next release, or grab a nightly when the PR for that is merged.