Overlapping events

[MichalVisnovsky]

Hi! Simple question, is there any way to disable overlap of events, when creating, dragging or even moving them? I want to achieve that in a specified day, i want to have only 1 event available within a time interval

[antoniandre]

Hi @MichalVisnovsky,

FYI, this repo and discussion is for the version 5 only. For version 4, you should open an issue here.

That being said, yes there are some ways.
In both v4 and v5, you can use @event-drop event listener like <vue-cal :events="events" @event-drop="onEventDrop"> and do some checks in there.
It will be facilitated in the v5 (can't tell you how now as I'll be working on it shortly) but in the v4, you receive the event as a parameter where you can check the start and end, then compare to all the events dates in your events array.

This piece of code should be something close to what you're looking for ;)
you'll have to test it though.

const events = ref([])

const onEventDrop = event1 => {
  // Go through all the events and compare start and end dates for possible overlap.
  // Array.some will stop at first fulfilled condition - better than forEach.
  events.value.some(event2 => {
    if (eventsOverlap(event1, event2)) {
      const event1Index = events.value.findIndex(event => event.id === event1.id)
      events.value.splice(event1Index, 1) // Remove the event directly from the array of events when overlapping.
      return true // Stop the loop right away.
    }
    return false
  })
}

const eventsOverlap = (event1, event2) => event1.start < event2.end && event2.start < event1.end

Cheers!

[MichalVisnovsky]

Hi, thanks for the answer, I have already cooked up a solution myself that is completely tailored to my use case, thanks for the reply tho :). Im looking forward for the next updates.