Our pure JavaScript Scheduler component


Post by RyanLim »

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


Post by saki »

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

Post by RyanLim »

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.


Post by saki »

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.


Post by RyanLim »

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


Post by RyanLim »

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:

componentnotrendered.PNG
componentnotrendered.PNG (6.66 KiB) Viewed 507 times

Post by saki »

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?


Post Reply