Bryntum Support Forums

Hi, I was wondering how to move the html from features such as eventBodyTemplate and eventTooltipFeature to an Angular component.

I'm not sure that I fully know what you want to achieve, so if the following won't answer your question, keep asking please.

eventBodyTemplate is implemented in mixin so it won't appear in features but it can be directly configured as property of <bryntum-scheduler />:

<bryntum-scheduler
        [eventBodyTemplate] = "schedulerConfig.eventBodyTemplate"
        // ...

See drag-onto-tasks Angular example where it is used this way.

Event tooltip on the other hand is a feature and it can be configured as such:

<bryntum-scheduler
        [eventTooltipFeature] = "schedulerConfig.eventTooltipFeature"
        // ...

It is accessible in runtime as:

scheduler.instance.features.eventTooltip

Hmm, I meant for example instead of the configuring it directly in schedulerConfig like below:

eventTooltipFeature: {
    template: (data) => `
      <div>
        HTML TEMPLATE HERE
      </div>`,
}

I could use an angular component like eventTooltip.component.html to replace the html in the template.

I would recommend to go with custom web component. We use this approach in angular-renderer example here: https://bryntum.com/examples/grid/frameworks/angular/angular-renderer/dist/angular-renderer/index.html (it's a Grid example, not Scheduler but the concept would be same).

Creating custom web components is very easy in Angular.

Thank you, I believe that is exactly what I was looking for.

Hi, sorry but I am facing an issue. I've tried to do it following the example, but it seems to turn it into html instead of using the angular component. My code in schedulerConfig is as follows:

features: {
      cellTooltip: {
        hideDelay: 40000,
        htmlEncode: false,
        tooltipRenderer(data: any) {
          return `<app-cell-tooltip data="${data}"></app-cell-tooltip>`;
        },
      },
    },

This is what I get on runtime:

Post please your showcase so that we can run, investigate and debug it.

Note: Did you create the custom tag <app-cell-tooltip> in app.module.ts the same way as in the example?