calendar today highlight

components/pages/calendar/EventCalendar.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/pages/calendar/atoms";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { CalendarEvent } from "@/components/pages/calendar/interfaces";
+import { act } from "react-test-renderer";
 
 interface EventCalendarProps {
   calendarHeight: number;
@@ -29,6 +30,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
     const { data: events, isLoading } = useGetEvents();
     const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+    const [activeDate, setActiveDate] = useState<Date>(new Date());
     const [mode, setMode] = useAtom(modeAtom);
 
     const setEditVisible = useSetAtom(editVisibleAtom);
@@ -91,10 +93,44 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
       [profileData]
     );
 
-    const memoizedHeaderContentStyle = useMemo(
-      () => (mode === "day" ? styles.dayModeHeader : {}),
-      [mode]
-    );
+    useEffect(() => {
+      setActiveDate(new Date());
+
+      const interval = setInterval(() => setActiveDate(new Date()), 60000);
+      return () => clearInterval(interval);
+    }, []);
+
+    const dayHeaderColor = useMemo(() => {
+      const isSameDate =
+        activeDate.getDate() === selectedDate.getDate() &&
+        activeDate.getMonth() === selectedDate.getMonth() &&
+        activeDate.getFullYear() === selectedDate.getFullYear();
+
+      return isSameDate && mode === "day" ? "white" : "#4d4d4d";
+    }, [selectedDate, mode, activeDate]);
+
+    const dateStyle = useMemo(() => {
+      const isSameDate =
+        activeDate.getDate() === selectedDate.getDate() &&
+        activeDate.getMonth() === selectedDate.getMonth() &&
+        activeDate.getFullYear() === selectedDate.getFullYear();
+
+      return isSameDate && mode === "day"
+        ? styles.dayHeader
+        : styles.otherDayHeader;
+    }, [selectedDate, mode, activeDate]);
+
+    const memoizedHeaderContentStyle = useMemo(() => {
+      if (mode === "day") {
+        return styles.dayModeHeader;
+      } else if (mode === "week") {
+        return styles.weekModeHeader;
+      } else if (mode === "month") {
+        return styles.monthModeHeader;
+      } else {
+        return {};
+      }
+    }, [mode]);
 
     const memoizedEvents = useMemo(() => events ?? [], [events]);
 
@@ -121,12 +157,14 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         onPressEvent={handlePressEvent}
         weekStartsOn={memoizedWeekStartsOn}
         height={calendarHeight}
-        activeDate={selectedDate}
+        activeDate={activeDate}
         date={selectedDate}
         onPressCell={handlePressCell}
         headerContentStyle={memoizedHeaderContentStyle}
         onSwipeEnd={handleSwipeEnd}
         scrollOffsetMinutes={offsetMinutes}
+        dayHeaderStyle={dateStyle}
+        dayHeaderHighlightColor={dayHeaderColor}
       />
     );
   }
@@ -148,6 +186,8 @@ const styles = StyleSheet.create({
     right: 42,
     height: 13,
   },
+  weekModeHeader: {},
+  monthModeHeader: {},
   loadingContainer: {
     flex: 1,
     justifyContent: "center",
@@ -160,4 +200,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  otherDayHeader: {
+    backgroundColor: "transparent",
+    color: "#919191",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });