Daypilot Event phases with custom bubbleHtml

1. Yes, the active areas are rendered on top of the event and it covers the text. The solution here would be to render the text in a special active area that is rendered last (they are rendered in the specified order).

2. You can specify a custom bubble for an active area like this:

const area = [
  // ...
  action: "Bubble",
  bubble: new DayPilot.Bubble({
    onLoad: args => {
      const e = args.source;
      args.html = "my bubble for event " + e.data.text;
    }
  })
];

Thanks for the reply!

Regarding 2) I have the problem that all my event data is created server-side (django) and fetched via ajax. Therefore, I assume I can't "inject" the required Javascript Code into the area definition, right? Is there another way to "attach" the Bubble to the area (so that both, area and bubble content are created dynamically on server-side)?

You can add the active areas on the client-side using onBeforeEventRender event handler:
https://api.daypilot.org/daypilot-scheduler-onbeforeeventrender/

It's better to add all dynamically-generated properties and event using this event handler - it will improve performance as you don't send generated data over the network.

Sorry to bother, but I still need your advise. The data for the active areas is highly dynamic and therefore generated server-side. When I want to create the active area on the onBeforeEventRender() on the client-side in order to attach a specific bubble, then how do I get the area information (e.g., start and end date) to the client?

Usually I create the entire ressources (for the visible section of the scheduler) on the server and pass it to the client via AJAX. If I now have an event with, e.g., three different active areas inside and each of these shall have it's own bubble with custom data, how could I access this information in the onBeforeEventRender() method? I guess additional AJAX calls in that event handler will not be a good idea due to performance overhead, right?

Again thanks for your support.

In this case it's better to generate the bubble content dynamically using an HTTP call.

Like this:

const area = [
  // ...
  action: "Bubble",
  bubble: new DayPilot.Bubble({
    onLoad: async args => {
      args.async = true;

      const e = args.source;
      const id = e.data.id;
      const {data} = await DayPilot.Http.get(`/api/getBubbleContent?id=${id}`);
      args.html = data.message + id;
      args.loaded();
    }
  })
];