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

StartTime indicator when moving an event

Asked by Andrea R.
5 months ago.

Hi, in daypilot calendar and for visibility reasons, I need to open a pop up for "start time" during event moving, automatically updated while moving; how can I do that? Is there a "onEventMoving" (or similar) propertie?

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

You can do that using onEventMoving event handler:

dp.onEventMoving = args => {
  args.top.enabled = true;
  args.top.html = args.start.toString("HH:mm");
};

See also:
https://api.daypilot.org/daypilot-calendar-oneventmoving/

Comment posted by Andrea R.
4 months ago.

Thks very much! In the same way, is it possible to fire an event when the mouse is on a specific cell of the calendar?

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

You can use the cellBubble property to display a callout on calendar cell hover:
https://doc.daypilot.org/calendar/cell-bubble/

Comment posted by Andrea R.
4 months ago.

I'm using Angular version, I configure my calendar in that way

eventHoverHandling: "Bubble",
bubble: new DayPilot.Bubble({....}),

the problem is that "hover" event is fired only when the mouse is over an "event" and not when the mouse is over a cell: how can I configure that?

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

The "bubble" property specifies an event bubble - for cells, you need to use "cellBubble":

config: DayPilot.CalendarConfig = {
  cellBubble: new DayPilot.Bubble({....}),
  // ...
}

Comment posted by Andrea R.
4 months ago.

I tried as indicated but it doesn't seem to work, when I move the mouse over the cells they are highlighted by changing color but the bubble does not open.
Is there any check I can do on the calendar to understand why the event is not triggered?
Thank you so much for the support

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

You can try placing a breakpoint in the onLoad event of the bubble to see if it is fired.

The onLoad event handler is necessary - there is no default content and if you don't specify args.html in onLoad the bubble won't open.

Comment posted by Andrea R.
4 months ago.

the function should be correct

cellBubble: new DayPilot.Bubble ({
onLoad: (args: any) => {
console.log ('ARGS BUBBLE% o', args);
}
}),

what I noticed is that when I position myself on a cell, the indicator does not change, while when I position myself on an event, the indicator changes (from arrow to hand)

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

You can test it with this project:
https://upload.daypilot.org/file/index/636qj5pky5etpoykw4jghjhaiu/

It seems to work fine (it uses the latest sandbox build: 2022.1.5187).

Please remember that you must set a non-empty args.html value in the onLoad handler, otherwise the bubble won't show up.

Let me know if this sample doesn't work for you.

Comment posted by Andrea R.
4 months ago.

Thank you very much, really helpful

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