From 8dc36920c4ff67df325b4a6e0ad2dcfd56355f15 Mon Sep 17 00:00:00 2001
From: Richard Feng <richardfeng43@gmail.com>
Date: Wed, 15 Apr 2026 22:48:10 -0400
Subject: [PATCH] #4143 Fixed availability issue

---
 .../Availability/EditAvailability.tsx                     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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<EditAvailabilityProps> = ({
 
   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<EditAvailabilityProps> = ({
   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<EditAvailabilityProps> = ({
   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<EditAvailabilityProps> = ({
     editedAvailabilities.set(availability.dateSet.getTime(), availability);
     setEditedAvailabilities(editedAvailabilities);
 
-    setCurrentlyDisplayedAvailabilities(getMostRecentAvailabilities(Array.from(editedAvailabilities.values()), initialDate));
+    setCurrentlyDisplayedAvailabilities(
+      getMostRecentAvailabilities(Array.from(editedAvailabilities.values()), displayedDate)
+    );
   };
 
   const stickyLeft = {