chore: add css class

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;

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>
+      <div className={styles.dayLabelContainer}>
-      {daysOfWeek.map((day, dayIndex) => (
+        {/* Empty cell in the top-left corner */}
-        <div key={dayIndex} className={styles.day}>
+        <div className={styles.day} />
-          <div className={styles.dayLabelContainer}>
+        {/* Displaying day labels */}
-            <div className={styles.dayLabel}>{day}</div>
+        {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>
           ))}