search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Daypilot Event phases with custom bubbleHtml

Asked by Fabian
2 months ago.

I try to achieve the following: In daypilot scheduler I have events which span a longer time period and are seperated into sub-phases. This works well in general using the Event Active Areas method. Now I face two problems

1) The event areas are rendered last. Thus, they may "overlap" with the event.text. It would be great if the area only sets the "background" color, but the main event's text overlays the area as well. Is that possible?

2) The event area shall have a seperate bubbleHtml (in order to display additional information about this particular phase of the event and not the event itself). Is that possible?

Thanks in advance!

Answer posted by Dan Letecky [DayPilot]
2 months ago.

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;
    }
  })
];
Comment posted by Fabian
2 months ago.

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)?

Comment posted by Dan Letecky [DayPilot]
2 months ago.

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.

Comment posted by Fabian
2 months ago.

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.

Comment posted by Dan Letecky [DayPilot]
2 months ago.

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();
    }
  })
];
New Reply
This reply is
Your name (optional):