Method to check if a new event would overlap with existing overlapping events

Hi!

I’m working with a side-project using fullcalendar-scheduler. But, I have a problem when I want to create or update a new event on the same day and time. They are overlapped but I don’t want it. I read the documentation about this topic:

• overlap property
• eventOverlap
• slotEventOverlap

I was able to avoid an overlapping event when I drag and drop an event, but the problem is when I create an event, it overlaps an existing one.

My code is in CodePen .

Test Data:

• title: “Five”
• ID Resource: “5c264cc91dbe730d37e5a4b9” (Room F)
• start: “2018-12-30T08:00:00”
• end: “2018-12-30T09:00:00”
• ID Username: “5c264cd31dbe730d37e5a4bd”

Result

Can you help me, please? I would appreciate.

[alxmcr]

Hi,

I’m so sorry for the delay with my answer, but I was trying to resolve this problem. I was able to improve the MattDMo code in StackOverflow:

function isAnOverlapEvent(events, eventToCheck) {
    // Properties
    const resourceID = eventToCheck.resourceId;
    // Moment.js objects
    const startMoment = eventToCheck.start;
    const endMoment = eventToCheck.end;

    try {
        if (moment.isMoment(startMoment) && moment.isMoment(endMoment)) {
            // Filter Events by a specific resource
            const eventsByResource = events.filter(event => event.resourceId === resourceID);
            for (let i = 0; i < eventsByResource.length; i++) {
                const eventA = eventsByResource[i];
                if (moment.isMoment(eventA.start) && moment.isMoment(eventA.end)) {
                    // start-time in between any of the events
                    if (moment(startMoment).isAfter(eventA.start) && moment(startMoment).isBefore(eventA.end)) {
                        console.log("start-time in between any of the events")
                        return true;
                    }
                    //end-time in between any of the events
                    if (moment(endMoment).isAfter(eventA.start) && moment(endMoment).isBefore(eventA.end)) {
                        console.log("end-time in between any of the events")
                        return true;
                    }
                    //any of the events in between/on the start-time and end-time
                    if (moment(startMoment).isSameOrBefore(eventA.start) && moment(endMoment).isSameOrAfter(eventA.end)) {
                        console.log("any of the events in between/on the start-time and end-time")
                        return true;
                    }
                } else {
                    const error = 'Error, Any event on array of events is not valid. start or end are not Moment objects';
                    console.error(error);
                    throw new Error(error);
                }
            }
            return false;
        } else {
            const error = 'Error, start or end are not Moment objects';
            console.error(error);
            throw new Error(error);
        }
    } catch (error) {
        console.error(error);
        throw error;
    }
}

and I’ve tried some test cases, and It works! 😄, but I would appreciate that you can make your own test cases and confirm if it works. Please. 🙏🙏

Complete Example on Codepen

[acerix]

In your submit function, you could check if the range of the new event is within the range of any existing event and if it is you could show an error instead of adding the event to the calendar.

Having something built-in to check for overlapping events could be useful so I’ll leave this open as a feature request.