Search code examples
fullcalendarfullcalendar-5

FullCalendar, get current date in selectOverlap callback?


I'm using FullCalendar 5 and the interactionPlugin in React. I'm wanting to allow users to select any date without an event AND any date that an event ends on. So if there is an event that goes from April 1st to the 3rd, I want to be able to select the 3rd, 4th, 5th, etc. but not the 2nd. Does that make sense?

I'm using the selectOverlap and it fires when the user drags the mouse over an event. I'm able to get the events start and end dates but not the date range the user has selected. Is there a way to get the date range the user has selected in the selectOverlap callback? If not, is there another callback I can use to get which date the mouse is currently over?

<FullCalendar
    ref={calendarRef}
    timeZone={timezone}
    plugins={[dayGridPlugin, interactionPlugin, momentTimezonePlugin]}
    selectOverlap={handleSelectOverlap}
    ...
/>

const handleSelectOverlap = (event) => {
    console.log("end", event.end);
    // I have the event's end date but how do I get the current date the mouse is over?
    return false;
};

Solution

  • I think you can't do this via selectOverlap - it only really allows for a simple yes/no as to whether it overlaps or not, it can't tell you where it overlaps.

    I think you would have to make your own validation by using https://fullcalendar.io/docs/selectAllow - which gives you the start and end date of the range the user has just selected - and https://fullcalendar.io/docs/Calendar-getEvents - to get all the events currently on the calendar - and then check the selection against each of the events yourself.