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

How to get a bubble on the time column headers in the scheduler.

Asked by Chris Laurie
18 days ago.

I am adding the holidays as detailed in the documentation and it works fine but I want to show the user the holiday's name as well. I thought of a bubble on the header or something similar. Any ideas on how I can add this?

Answer posted by Dan Letecky [DayPilot]
15 days ago.

You can show the bubble using a time header active area:

onBeforeTimeHeaderRender: args => {
    const header = args.header;
    args.header.areas = [
        {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            action: "Bubble",
            bubble: new DayPilot.Bubble({
                onLoad: args => {
                    const start = header.start;
                    args.html = `${start}`;
                }
            })
        }
    ];
}
Comment posted by Chris Laurie
11 days ago.

Thank you for your answer. Action = “Bubble“ does not seem to work. I can get the click to work then with a modal alert showing the name, but if I define the bubble as above I get the the mouseover of the cell content, in may case the day number.

Comment posted by Dan Letecky [DayPilot]
4 days ago.

The example above always shows the cell start as the bubble content. You can customize the args.html assignment in the onLoad event as needed to show the desired text.

Comment posted by Chris Laurie
3 days ago.

I cannot get the bubble to appear. I have copied the code as is and it does not work for me. I only get the default value of the header cell value itself, not my bubble. I know DP processes the area specification because I can set a background color. I have tried setting different area elements, one that paints a line, and one that does the bubble, also without success. The only area that I have been able to get. to work is action=none with a onclick.

Comment posted by Dan Letecky [DayPilot]
3 days ago.

Oh, I see.

That’s weird - it seems to work fine in my tests. Are you using the latest DayPilot Pro version? If so, can you give it a try in a blank project (you can generate one using the UI Builder).

Comment posted by Chris Laurie
3 days ago.

I am using pro but quite an old version so it is possible that it does not yet exist in the version I have.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):