chore: add css class

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>
           ))}