Our powerful JS Calendar component


Post by braincept »

Hi Team,
We are facing one issue in tooltip. Please have a look at the code.

getImage() {
    return `<img src="some-invalid-path" onError="this.src='/assets/images/ressourcen_ico.svg';"/>`;
  }
  
eventTooltip: { renderer: (data: any) => { return ` <dl> <dt>Resource:</dt> <dd> <div class="b-calendar-tooltip-worker"> <div class="b-calendar-tooltip-worker-image"> ${this.getImage()} </div> <div class="b-calendar-tooltip-worker-name"> XYX NAME </div> </div> </dd> </dl> ` } }

This /assets/images/ressourcen_ico.svg fallback image is not loading if we are passing the invalid path in src. Please check.


Post by Animal »

I don't think that inline event handlers work in HTML that is injected as innerHTML.

I think you need a real event listener on the tooltip's element, so try

            renderer : ({ tip, eventRecord, element }) => {
                if (!tip._hasImageErrorListener) {
                    EventHelper.on({
                        element,
                        error({ target }) {
                            target.src = 'fallback';
                        },
                        capture : true
                    });
                    tip._hasImageErrorListener = true;
                }
                return `...`;
            }

Post by braincept »

Thank you so much Animal your solution is working


Post Reply