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

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}`;
                }
            })
        }
    ];
}

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.

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.

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.

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

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