Scheduler - How to show bubble for active area

Asked by Anonymous
3 years ago.

I'm creating an active area inside an event for a top frozen row with the following configuration.

{
        id: DayPilot.guid(),
        text: '',
        resource: resourceId,
        start: new Date(item.date).subHours(12),
        end: new Date(item.date),
        backColor: 'transparent',
        borderColor: 'transparent',
        resizeDisabled: true,
        moveDisabled: true,
        areas: [
          {
            action: 'Bubble',            
            css: "scheduler_attendance-planning-service-comment",
            html: '<img src="assets/icons/comment_small.png" height="16" width="16">',
            bubble: new DayPilot.Bubble({
              onLoad: function (args) {
                console.log('test');
                args.html = item.comment;
              }
            })
          }
        ],
        tags: {
          type: 'PlanningComment',
          data: item
        }
      }

However, the bubble doesn't show. The event onLoad isn't fired at all. Do you have any idea, what could cause this behaviour? Am I doing something wrong?

Answer posted by Dan Letecky [DayPilot]
3 years ago.

This seems to be fine and a static version of your sample works well in my tests:

dp.events.list = [
    {
        id: DayPilot.guid(),
        text: '',
        resource: "frozen1",
        start: "2022-02-01",
        end: "2022-02-10",
        backColor: 'transparent',
        borderColor: 'transparent',
        resizeDisabled: true,
        moveDisabled: true,
        areas: [
            {
                action: 'Bubble',
                css: "scheduler_attendance-planning-service-comment",
                html: 'TTT',
                bubble: new DayPilot.Bubble({
                    onLoad: function (args) {
                        console.log('test');
                        args.html = "test";
                    }
                })
            }
        ],
        tags: {
            type: 'PlanningComment',
            data: "item"
        }
    }
];

If the active area is visible, I recommend checking the browser JS console - make sure there are no errors.

If there is no error, I recommend trying it with a blank project (e.g. one generated using https://builder.daypilot.org).

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.