From 58fa6ad279c4ede8ed3b7ea6bcedbaeefe8cd973 Mon Sep 17 00:00:00 2001
From: Cole Morgan <colemmorgann@gmail.com>
Date: Wed, 26 Mar 2025 17:43:49 -0400
Subject: [PATCH] feat: implemented events views

---
 src/app/events/page.tsx                       |  69 ++++++++++--
 src/app/globals.css                           |   3 +-
 src/components/events/CalendarEvent.tsx       |  93 ---------------
 .../{ => CalendarListView}/MonthlyEvent.tsx   |   0
 .../{ => CalendarListView}/MonthlyEvents.tsx  |   0
 .../{ => CalendarMonthView}/Calendar.tsx      |  12 +-
 .../{ => CalendarMonthView}/CalendarDay.tsx   |   8 +-
 .../{ => CalendarMonthView}/CalendarDays.tsx  |   0
 .../CalendarMonthView/CalendarEvent.tsx       |  53 +++++++++
 .../CalendarSkeleton.tsx                      |   0
 .../MobileCalendarEvent.tsx                   |   2 +-
 .../CalendarWeekView/WeekViewCalendar.tsx     |  63 +++++++++++
 .../events/CalendarWeekView/WeekViewDay.tsx   | 106 ++++++++++++++++++
 .../events/CalendarWeekView/WeekViewEvent.tsx |  55 +++++++++
 src/components/events/EventModal.tsx          |  67 +++++++++++
 src/hooks/useCalendarEvents.ts                |  64 +++++++++++
 src/hooks/useResponsiveDayCount.ts            |  27 +++++
 17 files changed, 509 insertions(+), 113 deletions(-)
 delete mode 100644 src/components/events/CalendarEvent.tsx
 rename src/components/events/{ => CalendarListView}/MonthlyEvent.tsx (100%)
 rename src/components/events/{ => CalendarListView}/MonthlyEvents.tsx (100%)
 rename src/components/events/{ => CalendarMonthView}/Calendar.tsx (87%)
 rename src/components/events/{ => CalendarMonthView}/CalendarDay.tsx (88%)
 rename src/components/events/{ => CalendarMonthView}/CalendarDays.tsx (100%)
 create mode 100644 src/components/events/CalendarMonthView/CalendarEvent.tsx
 rename src/components/events/{ => CalendarMonthView}/CalendarSkeleton.tsx (100%)
 rename src/components/events/{ => CalendarMonthView}/MobileCalendarEvent.tsx (96%)
 create mode 100644 src/components/events/CalendarWeekView/WeekViewCalendar.tsx
 create mode 100644 src/components/events/CalendarWeekView/WeekViewDay.tsx
 create mode 100644 src/components/events/CalendarWeekView/WeekViewEvent.tsx
 create mode 100644 src/components/events/EventModal.tsx
 create mode 100644 src/hooks/useCalendarEvents.ts
 create mode 100644 src/hooks/useResponsiveDayCount.ts

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index e743475..66540a7 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,19 +1,74 @@
 "use client";
-import Calendar from "@/components/events/Calendar";
-import MonthlyEvents from "@/components/events/MonthlyEvents";
+import Calendar from "@/components/events/CalendarMonthView/Calendar";
+import FiveDayCalendar from "@/components/events/CalendarWeekView/WeekViewCalendar";
+import MonthlyEvents from "@/components/events/CalendarListView/MonthlyEvents";
+import { FaRegCalendarAlt, FaList } from "react-icons/fa";
 import Footer from "@/components/Footer";
+import { Clock, Calendar as CalendarIcon, List } from "lucide-react";
+import { useState } from "react";
 
 export default function Events() {
+  const [calendarView, setCalendarView] = useState<"month" | "day" | "list">(
+    "month",
+  );
+
   return (
     <>
       <section className="relative min-h-screen bg-[#080d14]">
-        <div className="noise-bg"/>
-        <div className="mx-auto max-w-7xl px-4 md:px-10 pt-20 sm:pt-32 pb-12 text-white">
-        <Calendar />
-          <MonthlyEvents /> 
+        <div className="mx-auto max-w-7xl px-4 pb-12 pt-28 text-white sm:pt-36 md:px-10">
+          <h1 className="text-3xl sm:text-4xl font-semibold">Events</h1>
+          <h2 className="max-w-2xl sm:text-balance pt-4 text-xl sm:text-2xl text-gray-200">
+            Discover everything you need to know about upcoming{" "}
+            <span className="text-blue">club events</span> and{" "}
+            <span className="text-blue">exclusive opportunities.</span>
+          </h2>
+          <p className="pt-8 text-lg text-gray-300">Views:</p>
+
+          {/* buttons to change view */}
+          <div className="flex gap-2 pt-2 flex-wrap">
+          <button
+              className={`flex items-center gap-2 rounded-sm border px-4 py-1.5 transition-all ${calendarView === "month" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("month")}
+            >
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "month" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                Month View <CalendarIcon className="h-5" />
+              </span>
+            </button>
+            <button
+              className={`rounded-sm border px-4 py-1.5 transition-all ${calendarView === "day" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("day")}
+            >
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "day" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                {" "}
+                Day View <Clock className="h-5" />
+              </span>
+            </button>
+            <button
+              className={`flex items-center gap-2 rounded-sm border px-4 py-1.5 transition-all ${calendarView === "list" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("list")}
+            >
+              
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "list" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                List View <List className="h-5" />
+              </span>
+            </button>
+          </div>
+          {/* end buttons */}
+          
+          {/* Views */}
+          {calendarView ===  "day" && <FiveDayCalendar />}
+          {calendarView === "month" && <Calendar />}
+          {calendarView === "list" &&  <MonthlyEvents />}
+         
         </div>
       </section>
-      <Footer/>
+      <Footer />
     </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index e29e79b..c29a5b6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -16,8 +16,7 @@ textarea {
 }
 
 body {
-  /* font-family: "Space Grotesk", serif !important; */
-  font-family: "Space Mono", serif;
+  font-family: "Space Grotesk", serif !important;
   background-color: #ffffff;
   overflow-x: hidden;
 }
diff --git a/src/components/events/CalendarEvent.tsx b/src/components/events/CalendarEvent.tsx
deleted file mode 100644
index 08385f3..0000000
--- a/src/components/events/CalendarEvent.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client"
-import { FirebaseEvent } from "@/types/events";
-import { AnimatePresence, easeInOut, motion } from "framer-motion";
-import { useEffect, useState } from "react";
-import { FaXmark } from "react-icons/fa6";
-
-type CalendarEventProps = {
-  _event: FirebaseEvent;
-};
-
-const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
-  const [showEventModal, setShowEventModal] = useState<boolean>(false);
-
-  const handleEventClick = () => {
-    setShowEventModal((prev) => !prev);
-    document.body.style.overflowY =
-      document.body.style.overflowY === "hidden" ? "auto" : "hidden";
-  };
-
-  const time = _event.time.toDate().toLocaleString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-
-  function formatDateToMMDDYY(date: Date): string {
-    const padZero = (num: number): string => num.toString().padStart(2, "0");
-
-    const month = padZero(date.getMonth() + 1); // Months are 0-based
-    const day = padZero(date.getDate());
-    const year = date.getFullYear().toString().slice(-2); // Get last 2 digits of the year
-
-    return `${month}/${day}/${year}`;
-  }
-
-  const date = formatDateToMMDDYY(_event.time.toDate());
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.overflowY === "hidden") {
-        document.body.style.overflowY = "auto";
-      }
-    };
-  }, []);
-  return (
-    <>
-      <AnimatePresence>
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y:0 }}
-          transition={{ duration: 0.2, ease: easeInOut }}
-          className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"
-          onClick={handleEventClick}
-        >
-          {_event.title}
-        </motion.div>
-
-        {showEventModal && (
-          <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 px-6 backdrop-blur-sm" onClick={handleEventClick}>
-            <div className="relative w-full max-w-[400px] rounded-md border border-[#404040] bg-[#242424] px-6 py-10" onClick={(e) => e.stopPropagation()}>
-              <button
-                onClick={handleEventClick}
-                className="absolute right-4 top-4 text-2xl"
-              >
-                <FaXmark />
-              </button>
-              <p className="text-xl font-medium">{_event.title}</p>
-              <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
-                <p className="">Location: {_event.location}</p>
-                <p className="">Time: {time}</p>{" "}
-                <p className="">Date: {date}</p>
-              </div>
-              <p className="pt-3">{_event.description}</p>
-              <div className="flex gap-1.5 pt-4">
-                {_event.tags.map((tag, i) => (
-                  <div
-                    className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
-                    key={tag}
-                  >
-                    <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
-                    {tag}
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </AnimatePresence>
-    </>
-  );
-};
-
-export default CalendarEvent;
diff --git a/src/components/events/MonthlyEvent.tsx b/src/components/events/CalendarListView/MonthlyEvent.tsx
similarity index 100%
rename from src/components/events/MonthlyEvent.tsx
rename to src/components/events/CalendarListView/MonthlyEvent.tsx
diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/CalendarListView/MonthlyEvents.tsx
similarity index 100%
rename from src/components/events/MonthlyEvents.tsx
rename to src/components/events/CalendarListView/MonthlyEvents.tsx
diff --git a/src/components/events/Calendar.tsx b/src/components/events/CalendarMonthView/Calendar.tsx
similarity index 87%
rename from src/components/events/Calendar.tsx
rename to src/components/events/CalendarMonthView/Calendar.tsx
index b21445b..d5ff020 100644
--- a/src/components/events/Calendar.tsx
+++ b/src/components/events/CalendarMonthView/Calendar.tsx
@@ -39,20 +39,20 @@ export default function Calendar() {
   };
 
   return (
-    <div className="pt-8 md:pt-12 text-white">
+    <div className="pt-8 md:pt-16 text-white">
       <div className="flex items-end justify-between gap-5">
         <p className="text-lg md:text-3xl">
-         Calendar - {currentMonthName} {currentYear}
+         {currentMonthName} {currentYear}
         </p>
         <div className="flex gap-2">
           <button
-            className="rounded-full p-2 md:hover:bg-[#404040]"
+            className="rounded-full p-2 md:hover:bg-gray-700"
             onClick={handlePrevMonth}
           >
             <FaChevronLeft />
           </button>
           <button
-            className="rounded-full p-2 md:hover:bg-[#404040]"
+            className="rounded-full p-2 md:hover:bg-gray-700"
             onClick={handleNextMonth}
           >
             <FaChevronRight />
@@ -61,7 +61,7 @@ export default function Calendar() {
       </div>
 
       {/* Desktop Days of the Week */}
-      <div className="mt-4 hidden md:grid grid-cols-7 text-center font-semibold">
+      <div className="mt-4 hidden lg:grid grid-cols-7 text-center font-semibold">
         {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
           <div
             key={day}
@@ -73,7 +73,7 @@ export default function Calendar() {
       </div>
 
       {/* Mobile Days of the Week */}
-      <div className="mt-4 md:hidden grid grid-cols-7 text-center font-semibold">
+      <div className="mt-4 lg:hidden grid grid-cols-7 text-center font-semibold">
         {["Su", "M", "T", "W", "Th", "F", "Sa"].map((day) => (
           <div
             key={day}
diff --git a/src/components/events/CalendarDay.tsx b/src/components/events/CalendarMonthView/CalendarDay.tsx
similarity index 88%
rename from src/components/events/CalendarDay.tsx
rename to src/components/events/CalendarMonthView/CalendarDay.tsx
index 65a0cda..a79d42f 100644
--- a/src/components/events/CalendarDay.tsx
+++ b/src/components/events/CalendarMonthView/CalendarDay.tsx
@@ -27,13 +27,13 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
       <>
         {/* Desktop Calendar Day not in current month */}
         <div
-          className={`hidden border-l border-t border-gray-800 bg-[#0F1319] p-2 text-[#808080] md:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+          className={`hidden border-l border-t border-gray-800 bg-[#0F1319] p-2 text-[#808080] lg:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
         >
           <p className="flex justify-end">{format(day, "dd")}</p>
         </div>
 
         {/* Mobile Calendar Day not in current month */}
-        <div className="flex justify-center p-2 md:hidden">
+        <div className="flex justify-center p-2 lg:hidden">
           <div className="p-2 text-[#808080]">{format(day, "dd")}</div>
         </div>
       </>
@@ -43,7 +43,7 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
     <>
       {/* Desktop Calendar day in current month */}
       <div
-        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 md:block  ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 lg:block  ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
       >
         <div className={`flex justify-end `}><span className={`${today ? "bg-light-blue text-black rounded-full px-2" : ""}`}>{format(day, "dd")}</span></div>
         {dayEvents && (
@@ -57,7 +57,7 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
 
       {/* Mobile Calendar day in current month */}
 
-      <div className="flex justify-center pt-2 md:hidden">
+      <div className="flex justify-center pt-2 lg:hidden">
         {dayEvents && dayEvents.length > 0 ? (
          <MobileCalendarEvent day={day} dayEvents={dayEvents}/>
         ) : (
diff --git a/src/components/events/CalendarDays.tsx b/src/components/events/CalendarMonthView/CalendarDays.tsx
similarity index 100%
rename from src/components/events/CalendarDays.tsx
rename to src/components/events/CalendarMonthView/CalendarDays.tsx
diff --git a/src/components/events/CalendarMonthView/CalendarEvent.tsx b/src/components/events/CalendarMonthView/CalendarEvent.tsx
new file mode 100644
index 0000000..41f6ebb
--- /dev/null
+++ b/src/components/events/CalendarMonthView/CalendarEvent.tsx
@@ -0,0 +1,53 @@
+import { FirebaseEvent } from "@/types/events"; 
+import { AnimatePresence, easeInOut, motion } from "framer-motion"; 
+import { useEffect, useState } from "react"; 
+import EventModal from "../EventModal";   
+
+type CalendarEventProps = {   
+  _event: FirebaseEvent; 
+};  
+
+const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {   
+  const [showEventModal, setShowEventModal] = useState<boolean>(false);    
+
+  const handleEventClick = () => {     
+    setShowEventModal((prev) => !prev);     
+    document.body.style.overflowY =       
+      document.body.style.overflowY === "hidden" ? "auto" : "hidden";   
+  };    
+
+  useEffect(() => {     
+    return () => {       
+      if (document.body.style.overflowY === "hidden") {         
+        document.body.style.overflowY = "auto";       
+      }     
+    };   
+  }, []);    
+
+  return (     
+    <>       
+      <AnimatePresence>
+        <motion.div
+          key={`event-${_event.id}`}
+          initial={{ opacity: 0, y: 10 }}           
+          animate={{ opacity: 1, y: 0 }}           
+          transition={{ duration: 0.2, ease: easeInOut }}           
+          className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"           
+          onClick={handleEventClick}         
+        >           
+          {_event.title}         
+        </motion.div>          
+        
+        {showEventModal && (           
+          <EventModal 
+            key={`modal-${_event.id}`} 
+            _event={_event} 
+            onClose={handleEventClick} 
+          />         
+        )}       
+      </AnimatePresence>     
+    </>   
+  ); 
+};  
+
+export default CalendarEvent;
\ No newline at end of file
diff --git a/src/components/events/CalendarSkeleton.tsx b/src/components/events/CalendarMonthView/CalendarSkeleton.tsx
similarity index 100%
rename from src/components/events/CalendarSkeleton.tsx
rename to src/components/events/CalendarMonthView/CalendarSkeleton.tsx
diff --git a/src/components/events/MobileCalendarEvent.tsx b/src/components/events/CalendarMonthView/MobileCalendarEvent.tsx
similarity index 96%
rename from src/components/events/MobileCalendarEvent.tsx
rename to src/components/events/CalendarMonthView/MobileCalendarEvent.tsx
index 8557d1c..3f4e89d 100644
--- a/src/components/events/MobileCalendarEvent.tsx
+++ b/src/components/events/CalendarMonthView/MobileCalendarEvent.tsx
@@ -2,7 +2,7 @@ import { FirebaseEvent } from "@/types/events";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
 import { FaXmark } from "react-icons/fa6";
-import MonthlyEvent from "./MonthlyEvent";
+import MonthlyEvent from "../CalendarListView/MonthlyEvent";
 
 type MobileCalendarEventProps = {
   day: Date;
diff --git a/src/components/events/CalendarWeekView/WeekViewCalendar.tsx b/src/components/events/CalendarWeekView/WeekViewCalendar.tsx
new file mode 100644
index 0000000..aa4decc
--- /dev/null
+++ b/src/components/events/CalendarWeekView/WeekViewCalendar.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { format } from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useCalendarEvents } from '@/hooks/useCalendarEvents';
+import WeekViewDay from './WeekViewDay';
+import { useResponsiveDayCount } from '@/hooks/useResponsiveDayCount';
+
+const FiveDayCalendar: React.FC = () => {
+  // Get the responsive day count.
+  const dayCount = useResponsiveDayCount();
+  const {
+    currentStartDate,
+    dayRange,
+    isLoading,
+    error,
+    navigateDays,
+    getEventsForDay,
+  } = useCalendarEvents(dayCount);
+
+  // Determine the grid columns based on dayCount.
+  let gridColsClass = 'grid-cols-1';
+  if (dayCount === 5) gridColsClass = 'grid-cols-5';
+  else if (dayCount === 4) gridColsClass = 'grid-cols-4';
+  else if (dayCount === 3) gridColsClass = 'grid-cols-3';
+  else if (dayCount === 2) gridColsClass = 'grid-cols-2';
+  else if (dayCount === 1) gridColsClass = 'grid-cols-1';
+
+  return (
+    <div className="px-4 pt-16">
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <button
+          onClick={() => navigateDays('backward')}
+          className="p-1.5 hover:bg-gray-700 rounded-full"
+        >
+          <ChevronLeft />
+        </button>
+        <h2 className="text-xl font-bold">
+          {format(currentStartDate, 'MMMM yyyy')}
+        </h2>
+        <button
+          onClick={() => navigateDays('forward')}
+          className="p-1.5 hover:bg-gray-700 rounded-full"
+        >
+          <ChevronRight />
+        </button>
+      </div>
+
+      <div className={`grid ${gridColsClass} gap-6`}>
+        {dayRange.map((day) => (
+          <WeekViewDay
+            key={day.toISOString()}
+            day={day}
+            isLoading={isLoading}
+            error={error}
+            getEventsForDay={getEventsForDay}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FiveDayCalendar;
diff --git a/src/components/events/CalendarWeekView/WeekViewDay.tsx b/src/components/events/CalendarWeekView/WeekViewDay.tsx
new file mode 100644
index 0000000..6a949c1
--- /dev/null
+++ b/src/components/events/CalendarWeekView/WeekViewDay.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { format, startOfDay, endOfDay } from "date-fns";
+import { FirebaseEvent } from "@/types/events";
+import WeekViewEvent from "./WeekViewEvent";
+
+type WeekViewDayProps = {
+  day: Date;
+  isLoading: boolean;
+  error: any;
+  getEventsForDay: (day: Date) => FirebaseEvent[];
+};
+
+const WeekViewDay: React.FC<WeekViewDayProps> = ({
+  day,
+  isLoading,
+  error,
+  getEventsForDay,
+}) => {
+  // Define 2-hour time slots from 8 AM to 8 PM.
+  const timeslots = [
+    { startHour: 8, endHour: 10 },
+    { startHour: 10, endHour: 12 },
+    { startHour: 12, endHour: 14 },
+    { startHour: 14, endHour: 16 },
+    { startHour: 16, endHour: 18 },
+    { startHour: 18, endHour: 20 },
+  ];
+
+  return (
+    <div className="min-h-[200px] rounded-lg">
+      {/* Header for the day */}
+      <div className={`mb-2 flex flex-col items-center font-semibold px-2 py-4 ${getEventsForDay(day).length > 0 ? "text-white" : "text-dull"}`}>
+        <p className="text-5xl">{format(day, "d")}</p>
+        <p className="pt-1 text-lg">{format(day, "EEE")}</p>
+        <div className="flex h-10 flex-col items-center gap-1.5 py-1.5">
+          <span className="h-full max-h-8 w-0.5 rounded-full bg-gray-700" />
+          <span
+            className={
+              new Date().getTime() >= startOfDay(day).getTime() &&
+              new Date().getTime() < endOfDay(day).getTime()
+                ? "min-h-2 min-w-2 rounded-full bg-orange"
+                : ""
+            }
+          />
+        </div>
+        <p className={`text-sm`}>
+          {getEventsForDay(day).length} Event(s)
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="text-gray-500">Loading...</div>
+      ) : error ? (
+        <div className="text-red-500">Error loading events</div>
+      ) : (
+        // Map over the defined timeslots.
+        timeslots.map(({ startHour, endHour }) => {
+          // Create Date objects for the slot boundaries.
+          const slotStart = new Date(
+            day.getFullYear(),
+            day.getMonth(),
+            day.getDate(),
+            startHour,
+            0,
+            0
+          );
+          const slotEnd = new Date(
+            day.getFullYear(),
+            day.getMonth(),
+            day.getDate(),
+            endHour,
+            0,
+            0
+          );
+
+          // Filter events for this timeslot:
+          // Lower bound is inclusive (>= slotStart) and upper bound is exclusive (< slotEnd)
+          const eventsInSlot = getEventsForDay(day).filter((event) => {
+            const eventDate = event.time.toDate();
+            return (
+              eventDate.getTime() >= slotStart.getTime() &&
+              eventDate.getTime() < slotEnd.getTime()
+            );
+          });
+
+          return (
+            <div key={`${startHour}-${endHour}`} className="border-b border-gray-800 p-2 my-1">
+              <div className={`${eventsInSlot.length > 0 ? "" : "text-dull"} text-sm font-bold mb-1`}>
+                {format(slotStart, "h:mm a")} - {format(slotEnd, "h:mm a")}
+              </div>
+              {eventsInSlot.length > 0 ? (
+                eventsInSlot.map((_event) => (
+                  <WeekViewEvent _event={_event} key={_event.id}/>
+                ))
+              ) : (
+                <div className="text-xs text-gray-400">No events</div>
+              )}
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
+
+export default WeekViewDay;
diff --git a/src/components/events/CalendarWeekView/WeekViewEvent.tsx b/src/components/events/CalendarWeekView/WeekViewEvent.tsx
new file mode 100644
index 0000000..a2666a0
--- /dev/null
+++ b/src/components/events/CalendarWeekView/WeekViewEvent.tsx
@@ -0,0 +1,55 @@
+"use client";
+import { FirebaseEvent } from "@/types/events";
+import { format } from "date-fns";
+import React, { useState, useEffect } from "react";
+import { AnimatePresence, easeInOut, motion } from "framer-motion";
+import EventModal from "../EventModal";
+
+type WeekViewEventProps = {
+  _event: FirebaseEvent;
+};
+
+const WeekViewEvent: React.FC<WeekViewEventProps> = ({ _event }) => {
+  const [showEventModal, setShowEventModal] = useState<boolean>(false);
+
+  const handleEventClick = () => {
+    setShowEventModal((prev) => !prev);
+    document.body.style.overflowY =
+      document.body.style.overflowY === "hidden" ? "auto" : "hidden";
+  };
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.overflowY === "hidden") {
+        document.body.style.overflowY = "auto";
+      }
+    };
+  }, []);
+
+  return (
+    <>
+        <div
+          className="hover:bg-gray-800 transition-all my-4 mb-1 rounded border-l-4 border-orange px-2 py-1 cursor-pointer"
+          onClick={handleEventClick}
+        >
+          <div className="font-medium">{_event.title}</div>
+          <div className="text-xs text-gray-400">
+            {format(_event.time.toDate(), "h:mm a")}
+          </div>
+          {_event.description && (
+            <div className="text-xs text-gray-400">{_event.description}</div>
+          )}
+        </div>
+
+        {showEventModal && (
+          <EventModal
+            key={`weekview-modal-${_event.id}`}
+            _event={_event}
+            onClose={handleEventClick}
+          />
+        )}
+    </>
+  );
+};
+
+export default WeekViewEvent;
diff --git a/src/components/events/EventModal.tsx b/src/components/events/EventModal.tsx
new file mode 100644
index 0000000..cbb30c5
--- /dev/null
+++ b/src/components/events/EventModal.tsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import { FirebaseEvent } from "@/types/events";
+import { FaXmark } from "react-icons/fa6";
+
+interface EventModalProps {
+  _event: FirebaseEvent;
+  onClose: () => void;
+}
+
+const EventModal: React.FC<EventModalProps> = ({ _event, onClose }) => {
+  if (!_event) return null;
+
+  const time = _event.time.toDate().toLocaleString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+
+  const formatDateToMMDDYY = (date: Date): string => {
+    const padZero = (num: number): string => num.toString().padStart(2, "0");
+    const month = padZero(date.getMonth() + 1);
+    const day = padZero(date.getDate());
+    const year = date.getFullYear().toString().slice(-2);
+    return `${month}/${day}/${year}`;
+  };
+
+  const date = formatDateToMMDDYY(_event.time.toDate());
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 px-6 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-[400px] rounded-md border border-gray-700 bg-gray-900 px-6 py-10"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button onClick={onClose} className="absolute right-4 top-4 text-2xl">
+          <FaXmark />
+        </button>
+        <p className="text-xl font-medium">{_event.title}</p>
+        <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
+          <p>Location: {_event.location}</p>
+          <p>Time: {time}</p>
+          <p>Date: {date}</p>
+        </div>
+        <p className="pt-3">{_event.description}</p>
+        <div className="flex gap-1.5 pt-4">
+          {_event.tags.map((tag, i) => (
+            <div
+              key={`${tag}-${i}`}
+              className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${
+                i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"
+              }`}
+            >
+              <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
+              {tag}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventModal;
diff --git a/src/hooks/useCalendarEvents.ts b/src/hooks/useCalendarEvents.ts
new file mode 100644
index 0000000..863b35f
--- /dev/null
+++ b/src/hooks/useCalendarEvents.ts
@@ -0,0 +1,64 @@
+import { useState, useMemo } from 'react';
+import { addDays, startOfDay, endOfDay, isWithinInterval } from 'date-fns';
+import { useCachedEvents } from './useCachedEvents';
+import { FirebaseEvent } from '@/types/events';
+
+export function useCalendarEvents(daysCount: number = 5) {
+  const [currentStartDate, setCurrentStartDate] = useState(startOfDay(new Date()));
+
+  // Generate a day range based on the provided daysCount.
+  const dayRange = useMemo(
+    () => Array.from({ length: daysCount }, (_, i) => addDays(currentStartDate, i)),
+    [currentStartDate, daysCount]
+  );
+
+  const firstDay = dayRange[0];
+  const lastDay = dayRange[dayRange.length - 1];
+
+  // Always call useCachedEvents for both months, using the first day of each month.
+  const queryFirst = useCachedEvents(new Date(firstDay.getFullYear(), firstDay.getMonth(), 1));
+  const querySecond = useCachedEvents(new Date(lastDay.getFullYear(), lastDay.getMonth(), 1));
+
+  // Combine events from both queries based on whether the range spans two months.
+  const combinedEvents = useMemo(() => {
+    if (firstDay.getMonth() === lastDay.getMonth()) {
+      return queryFirst.data || [];
+    } else {
+      const events1 = queryFirst.data || [];
+      const events2 = querySecond.data || [];
+      return [...events1, ...events2];
+    }
+  }, [queryFirst.data, querySecond.data, firstDay, lastDay]);
+
+  // Combine loading and error states.
+  const isLoading =
+    queryFirst.isLoading || (firstDay.getMonth() !== lastDay.getMonth() && querySecond.isLoading);
+  const error =
+    queryFirst.error || (firstDay.getMonth() !== lastDay.getMonth() && querySecond.error);
+
+  const navigateDays = (direction: 'forward' | 'backward') => {
+    const increment = direction === 'forward' ? daysCount : -daysCount;
+    setCurrentStartDate(prevDate => addDays(prevDate, increment));
+  };
+
+  // Filter events for a given day.
+  const getEventsForDay = (day: Date): FirebaseEvent[] => {
+    return combinedEvents.filter(event => {
+      const eventDate = event.time.toDate();
+      return isWithinInterval(eventDate, {
+        start: startOfDay(day),
+        end: endOfDay(day)
+      });
+    });
+  };
+
+  return {
+    currentStartDate,
+    dayRange,
+    events: combinedEvents,
+    isLoading,
+    error,
+    navigateDays,
+    getEventsForDay
+  };
+}
diff --git a/src/hooks/useResponsiveDayCount.ts b/src/hooks/useResponsiveDayCount.ts
new file mode 100644
index 0000000..a79a573
--- /dev/null
+++ b/src/hooks/useResponsiveDayCount.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+export function useResponsiveDayCount() {
+  const getInitialDayCount = () => {
+    if (typeof window !== 'undefined') {
+      const width = window.innerWidth;
+      if (width >= 1280) return 5;
+      if (width >= 768) return 4;
+      if (width >= 640) return 3;
+      return 1;
+    }
+    return 5;
+  };
+
+  const [dayCount, setDayCount] = useState(getInitialDayCount);
+
+  useEffect(() => {
+    const updateDayCount = () => {
+      setDayCount(getInitialDayCount());
+    };
+
+    window.addEventListener('resize', updateDayCount);
+    return () => window.removeEventListener('resize', updateDayCount);
+  }, []);
+
+  return dayCount;
+}