diff --git a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx index 0d9298d6a2..ef43fc0a0a 100644 --- a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx +++ b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx @@ -40,6 +40,8 @@ const EditAvailability: React.FC = ({ const [isDragging, setIsDragging] = useState(false); + const [displayedDate, setDisplayedDate] = useState(initialDate); + const handleMouseDown = (event: any, availability: Availability, selectedTime: number) => { event.preventDefault(); toggleTimeSlot(availability, selectedTime); @@ -49,6 +51,7 @@ const EditAvailability: React.FC = ({ const increaseDateRange = () => { const lastDate = currentlyDisplayedAvailabilities[currentlyDisplayedAvailabilities.length - 1].dateSet; const newDate = addDaysToDate(lastDate, 1); + setDisplayedDate(newDate); const newAvailabilities = getMostRecentAvailabilities(totalAvailabilities, newDate); newAvailabilities.forEach((availability) => { @@ -64,6 +67,7 @@ const EditAvailability: React.FC = ({ const decreaseDateRange = () => { const firstDate = currentlyDisplayedAvailabilities[0].dateSet; const newDate = addDaysToDate(firstDate, -7); + setDisplayedDate(newDate); const newAvailabilities = getMostRecentAvailabilities(totalAvailabilities, newDate); newAvailabilities.forEach((availability) => { @@ -106,7 +110,9 @@ const EditAvailability: React.FC = ({ editedAvailabilities.set(availability.dateSet.getTime(), availability); setEditedAvailabilities(editedAvailabilities); - setCurrentlyDisplayedAvailabilities(getMostRecentAvailabilities(Array.from(editedAvailabilities.values()), initialDate)); + setCurrentlyDisplayedAvailabilities( + getMostRecentAvailabilities(Array.from(editedAvailabilities.values()), displayedDate) + ); }; const stickyLeft = {