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

StartTime indicator when moving an event

Asked by Andrea R.
23 days 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]
21 days 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.
12 days 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]
11 days 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.
10 days 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]
10 days 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.
10 days 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]
10 days 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.
10 days 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]
10 days 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.
9 days ago.

Thank you very much, really helpful

New Reply
This reply is
Your name (optional):