Rich Text in Top-Date Hover popup

I do have seperate ones for Months vs. Date, and I would like both to be pretty if possible:

Hummmm, maybe I need to be using your Active-Areas thing instead?

…however, I have had trouble getting rich content (bootstrap) to work properly in your popup container in the past as well (and I kinda like the info on-hover, but then again, it would be much nicer on the database… loading on hover is another difficult task, so I instead hit the DB on load for all this data people will seldom look at).

I don’t know… There is no room for an info-icon on every date, and towards the end of the month it kinda messes up that month+year text which already gets squished.

I don’t remember the exact issues with your grey-boarder popup container shown above, but I just wasn’t able to do what I needed to in it, so I just make a click trigger my own popups instead:

I also made my own popup for resizes and moves:

Anyway… to stay OT, do you have any suggestions on how I could make a Months and separately Dates, have either on-hover or on-click “popups” with Rich Content, but that does not take you away from the page and disappears when you move your mouse away just like an event on-hover? (I guess I could code all that by hand, I just wish it was easy like it is with the events hover)

1. To show a hover popup, you can use the Bubble component. For time headers, it is necessary to use an active area that will display a custom bubble when the action is set to “Bubble”.

This example will insert a transparent active area that covers the whole header cells and invokes the specified bubble on hover. You can also replace it with a smaller area that displays an icon.

The time header cell details are available as args.source in the onLoad handler of the bubble.

onBeforeTimeHeaderRender: args => {
  args.header.areas = [
    {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      action: "Bubble",
      bubble: new DayPilot.Bubble({
        onLoad: args => {
          const header = args.source;
          args.html = "your rich content";
        }
      }
    }
  ];
}

2. Instead of a hover bubble, you can use the onClick handler of the active area to display a modal dialog. You can use DayPilot.Modal or any other third party modal dialog.

onBeforeTimeHeaderRender: args => {
  args.header.areas = [
    {
      top: 0,
      right: 0,
      height: 20,
      width: 20,
      fontColor: "black",
      symbol: "daypilot.svg#edit",  // or any other icon
      onClick: args => {
        const header = args.source;
        // display your modal dialog
      }
    }
  ];
}

That seems very cool, but I don’t have header.areas… maybe I need to update?

It looks like you have a typo in your code, it’s args.header.areas, not args.headers.areas.