I need to disable date selection on my calendar i have used the selectAllow prop of the reactfull calendar to achieve this. this is my code
const handleSelectAllow = (selectInfo) => {
const currentDate = new Date();
const selectedDate = selectInfo.start;
const threeMonthsAgo = new Date();
threeMonthsAgo.setMonth(currentDate.getMonth() - 3);
const threeMonthsFromNow = new Date();
threeMonthsFromNow.setMonth(currentDate.getMonth() + 3);
if (
selectedDate >= threeMonthsAgo &&
selectedDate <= threeMonthsFromNow
) {
return true;
} else {
alert('Date selection is not allowed. Please select a date within the range of three months ago and three months from now.');
return false;
}
// return (
// selectedDate >= threeMonthsAgo && selectedDate <= threeMonthsFromNow
// );
};
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
// headerToolbar={{
// left: 'prev,next today',
// center: 'title',
// right: 'dayGridMonth,timeGridWeek,timeGridDay',
// }}
selectAllow={handleSelectAllow}
selectLongPressDelay={null}
initialView="dayGridMonth"
editable={false}
selectable={true}
showNonCurrentDates={false}
// eventClick={handleSelectAllow}
// eventMouseEnter={handleEventMouseEnter}
selectMirror={true}
events={allEvents}
select={handleDateClick}
eventContent={renderEventContent}
eventDidMount={eventDidMount}
eventWillUnmount={eventWillUnmount}
// eventRender={eventRender}
/>
the function is working properly but the issue is after the 1st click if i hover through the calendar the alert is continously showing. i need to only show the alert on clicking. Any fixes?, I have used react fullcalendar.