From 9105bcba15d7e9977f1772e5e3ab03212d8ee4da Mon Sep 17 00:00:00 2001
From: doprz <52579214+doprz@users.noreply.github.com>
Date: Wed, 6 Mar 2024 13:11:36 -0600
Subject: [PATCH] chore: add css class

---
 .../CalendarGrid/CalendarGrid.module.scss     | 21 +++++--------
 .../common/CalendarGrid/CalendarGrid.tsx      | 30 +++++++++++++------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index c0212d03..6f5e96c0 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -1,9 +1,15 @@
 @use 'sass:color';
 @use 'src/views/styles/colors.module.scss';
 
-.dayLabelContainer {
+.calendar {
+    display: grid;
+    grid-template-columns: auto repeat(5, 1fr);
+    gap: 10px;
+}
+
+.day {
+    gap: 5px;
     display: flex;
-    flex-direction: row;
     height: 13px;
     min-width: 40px;
     min-height: 13px;
@@ -12,9 +18,6 @@
     align-items: center;
     gap: 10px;
     flex: 1 0 0;
-}
-
-.dayLabel {
     color: colors.$burnt_orange;
     text-align: center;
     font-size: 14.22px;
@@ -23,14 +26,6 @@
     line-height: normal;
 }
 
-.timeAndGrid {
-    display: flex;
-}
-
-.day {
-    gap: 5px;
-}
-
 .timeBlock {
     display: flex;
     width: 50px;
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index c0161ec2..95ff558f 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -4,6 +4,8 @@ import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
 const daysOfWeek = Object.values(DAY_MAP);
+daysOfWeek.pop();
+daysOfWeek.pop();
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const grid = Array.from({ length: 5 }, () =>
   Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
@@ -16,17 +18,27 @@ const grid = Array.from({ length: 5 }, () =>
 const Calendar: React.FC = (props) => {
   return (
     <div className={styles.calendar}>
-      <div className={styles.dayLabelContainer}></div>
-      {daysOfWeek.map((day, dayIndex) => (
-        <div key={dayIndex} className={styles.day}>
-          <div className={styles.dayLabelContainer}>
-            <div className={styles.dayLabel}>{day}</div>
+      <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>
-          {hoursOfDay.map((hour) => (
+        ))}
+      </div>
+
+      {/* Displaying the rest of the calendar */}
+      {hoursOfDay.map((hour) => (
+        <div key={hour} className={styles.row}>
+          {/* Hour column */}
+          <div className={styles.timeLabelContainer}>
+            <span>{hour}:00</span>
+          </div>
+          {/* Calendar cells for each day */}
+          {daysOfWeek.map((day, dayIndex) => (
             <div key={`${day}-${hour}`} className={styles.timeBlock}>
-              <div className={styles.timeLabelContainer}>
-                <span>{hour}:00</span>
-              </div>
               <CalendarCell />
             </div>
           ))}