I'm trying to figure out how to block out all past days in my calendar to prevent users from scheduling an appointment and I'm not able to get it to work.
For example, today is the 8th of November I want to block out all previous days from being selected.
I looked online and there are many SO articles on how to do this with other languages but I'm using the ReactJS FullCalendar wrapper which doesn't have an option to pass into the props to deal with this. I looked at there documentation and I tried to play around with there API and I wasn't able to figure it out.
Here is my code:
import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
// Time Slots
const ScheduleAppointment = (props) => {
const someMethod = () => {
let calendarApi = calendarRef.current.getApi();
let changeMinDate =
(calendarApi.currentDataManager.data.dateProfile.validRange = {
start: "2021-11-08",
end: null
});
console.log("calendarapi11 is..", changeMinDate);
console.log("calendarapi222 is..", calendarApi);
};
useEffect(() => {
someMethod();
}, []);
return (
<div className="fluid-container">
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
dateClick={handleDateClick}
selectable={true}
ref={calendarRef}
// this doesn't work I have to manually get into the api via refs
//validRange = {
//start: '2021-11-08',
//end: null
//}
/>
</div>
);
};
export default ScheduleAppointment;I'd expect that
validRange = {{
start: '2021-11-08',
end: null
}}
should work.
The outer set of { }s denotes the start and end of the property value - just like it does on the plugins property, for example. Then the inner ones are part of the JS object containing the range data.