[ANGULAR] Change color of EventToolTip header based on resourceId

[abhi]

Is it possible to change EventToolTip header background color based on resourceId??

[Animal]

It's just plain old HTML and CSS. You are in full control. You can edit your own CSS to make anything any colour.

[abhi]

Yes. But i want it to change based on resourceId.
Example: In above image, i can see that it is hovered on blue background event so the header should be blue. Similarly if i hover on pink background event then header should be pink.

Right now i have added css to b-eventtootip-header which is giving me constant background color and cant find any uniq class in header tag.

[Animal]

OK, that should be possible with a listener. I will get some code together which you can past into an online example.

[Animal]

        eventTooltip : {
            listeners : {
                beforeShow({ source }) {
                    const { headerElement, eventRecord } = source;

                    // Remove the previous custom class
                    headerElement.classList.remove(source.resourceCls);
                    headerElement.classList.add(source.resourceCls = `b-resource-${eventRecord.resource.id}`);
                }
            }
        }

See how the <header> now has b-resource-hotel:

Screenshot 2022-02-25 at 12.34.05.png (145.73 KiB) Viewed 568 times

[abhi]

Awesome. Works like a charm!!