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

Check For Overlap with Javascript

Asked by Anonymous
28 days ago.

Hello,

I’m using DayPilot Lite and I want to check to see if an event overlaps and prevent the event from being moved to an occupied cell. Is there a way I can use event handlers to achieve this? (i.e. onEventMove, onEventMoving)

Answer posted by Dan Letecky [DayPilot]
28 days ago.

You can do it in the onEventMove event handler using the events.forRange() method:

onEventMove: args => {
    const movedEvent = args.e;
    const newStart = args.newStart;
    const newEnd = args.newEnd;

    const overlappingEvents = calendar.events.forRange(newStart, newEnd).filter(event => {
        return event.id() !== movedEvent.id();
    });

    const hasOverlap = overlappingEvents.length > 0;

    if (hasOverlap) {
        args.preventDefault();
        
        // Additional actions (e.g., user notification) can be added here
    }
}

The events.forRange() method is available in the open-source version since 2024.4.609.

The onEventMoving event is only available in the Pro version.

[updated]

Comment posted by Anonymous
27 days ago.

I have my calendar defined as dp, and I’m getting an Uncaught TypeError: dp.events.forRange is not a function.

Comment posted by Dan Letecky [DayPilot]
27 days ago.

It looks like you are using an older version - please make sure that you are using 2024.4.609 (which was released earlier today).

Also, there is a bug in the original example - the comparison needs to be done using the id() method of DayPilot.Event:

const overlappingEvents = calendar.events.forRange(newStart, newEnd).filter(event => {
  return event.id() !== movedEvent.id();
});
Comment posted by Anonymous
27 days ago.

It works! Thank you!

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):