"onEventMouseEnter" and "onEventMouseLeave" hooks for the Calendar component

These events can be added but your scenario can be better handled using active areas. If you add active areas with visibility: "Hover" they will ony be displayed when you hover the event.

By default, the event top div (marked with .calendar_default_event) uses overflow: hidden inline style to prevent the content from being displayed outside of the main box. The active areas are added as child elements.

If you override this style like this:

.calendar_default_event {
  overflow: visible !important;
}

you will be able to define active areas with a negative right value and they will be displayed next to the event on the right.

I got something working, thanks!

I think it would still be interesting to have dedicated "onEventMouseEnter" and "onEventMouseLeave" hooks, but I can indeed do what I wanted now.

My remaining issue is when the hovered Event is in the last day/column of the week Calendar. Your implementation of “top” and “bottom” elements works well as the elements are slided left when displayed for an Event in the last column. But I have no idea how to implement this using an “active area” element.

Any tips?
Thanks in advance!

I found a way by adding a “isLastDayOfWeek“ class to events when they are rendered :

dp.onBeforeEventRender = (args) => {
  if ((args.data.start as DayPilot.Date).getDayOfWeek() === 0) {
    args.data.cssClass = 'isLastDayOfWeek';
  }
};

(I’ll have to ajust this in order to respect the “weekStarts“ option.)
I can then modified the style (left/right) of the elements I add using active areas.

But I’m not sure this is the best way to achieve it.

Yes, this is a good solution. Here is a bit more universal check of the last column (in days view):

const lastDayStart = dp.visibleEnd().addDays(-1);
const isLastDay = args.e.start() >= lastDayStart;

It has some limitations (e.g. it won’t work for events spanning multiple days) but for standard scenarios it should work.

The onEventMouseEnter and onEventMouseLeave events are now available in the latest sandbox build (2025.3.6624). They have the same limited capabilities as the Scheduler version (i.e. no dynamic labels).

Wow, you’re fast, thank you!

I’m new to using sandbox builds: they are only available in “trial” mode right? I can’t use my key to download a sandbox build not in registered mode, is that correct?

I tried using : npm install https://npm.daypilot.org/daypilot-pro-javascript/[MY_KEY]/2025.3.6624.tar.gz and npm install https://npm.daypilot.org/daypilot-pro-javascript/trial/[MY_KEY]/2025.3.6624.tar.gz but that doesn’t seem to work.

*in registered mode

Yes, the sandbox builds are only available as trials. You can get the NPM link at npm.daypilot.org.

Or just use “trial” instead of the key.