Our pure JavaScript Scheduler component


Post by thomasb »

Hello

Is there a way that I can change the short name in the avatar (if there is no image), so it's not using the first letters of first the first name and last name.
But I don't wanna use the renderer, because then I need to do all the image implementation from scratch.

Image
bmp deutsch


Post by tasnim »

Hi,

so it's not using the first letters of first the first name and last name.

I'm not sure what you mean by that, could you please elaborate a bit? It seems to be working fine here

Screenshot 2024-02-22 172544.png
Screenshot 2024-02-22 172544.png (32.83 KiB) Viewed 50 times

Post by thomasb »

Hi Tasnim

Yes, but what if i want to see for example "Ti" for "Time Cook". Can I figure this?


Post by tasnim »

Hi,

You could achieve it by overriding the AvatarRendering method
https://bryntum.com/products/scheduler/docs/api/Core/widget/util/AvatarRendering

Here is an example of how you could achieve it

class MyAvatar extends AvatarRendering {
    getResourceAvatar(options) {
        if (Array.isArray(options)) {
            return options.map(item => this.getResourceAvatar(item));
        }

    const
        { initials, color, iconCls, imageUrl, defaultImageUrl, dataset = {}, resourceRecord, alt = StringHelper.encodeHtml(resourceRecord?.name) } = options,
        // It gets the first 2 letters of string
        firstTwo = options.name.trim().slice(0, 2),
        config = this.getImageConfig(initials, color, imageUrl, defaultImageUrl, dataset, alt) ||
            this.getIconConfig(iconCls, dataset) ||
            this.getResourceInitialsConfig(firstTwo, color, dataset), // It creates the config with those first 2 letters
        { size } = this;
        console.log('options', options);

    Object.assign(config.style, {
        ...(size ? { height : size, width : size } : undefined)
    });

    return config;
}
}

And this how the Column looks like

            {
                id    : 'name',
                type  : 'resourceInfo',
                text  : 'Staff',
                // showImage : false,
                useNameAsImageName : true,
                width : 200,
                renderer(props) {
                    // console.log(props);
                    const { cellElement, value } = props;
                    const avatar = new MyAvatar({
                        element : cellElement 
                    });

                return {
                    parent : 'avatars',
                    class : 'b-resource-wrap',
                    style : 'display:flex; align-items:center; gap: .5em;',
                    children : [
                        avatar.getResourceAvatar(new ResourceModel({ name : value })),
                        value
                    ]
                }
            }
        },

And here is what it looks like

Screenshot 2024-02-22 182331.png
Screenshot 2024-02-22 182331.png (26.75 KiB) Viewed 45 times

Best regards,
Tasnim


Post by thomasb »

ok, thanks!


Post Reply