From aaccd9b5626f490906fb0d8eb6ab1e7f81358ec3 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 23:12:51 -0600
Subject: [PATCH] Combine Days with Hours

---
 .../common/CalendarGrid/CalendarGrid.tsx           | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 4b90edf1..582faa9f 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -21,16 +21,12 @@ const Calendar: React.FC = (props) => {
       <div className={styles.dayLabelContainer}>
         {/* Empty cell in the top-left corner */}
         <div className={styles.day} />
-        {/* Displaying day labels */}
-        {daysOfWeek.map(day => (
-          <div key={day} className={styles.day}>
-            {day}
-          </div>
-        ))}
+        
       </div>
       {/* Displaying the rest of the calendar */}
       <div className={styles.timeAndGrid}>
         <div className={styles.timeColumn}>
+          <div className={styles.timeBlock}></div>
           {hoursOfDay.map((hour) => (
             <div key={hour} className={styles.timeBlock}>
               <div className={styles.timeLabelContainer}>
@@ -40,6 +36,12 @@ const Calendar: React.FC = (props) => {
           ))}
         </div>
         <div className={styles.calendarGrid}>
+          {/* Displaying day labels */}
+          {daysOfWeek.map(day => (
+            <div key={day} className={styles.day}>
+              {day}
+            </div>
+          ))}
           {grid.map((row, rowIndex) => (
             row
           ))}