chore: refactor

.vscode/settings.json

@@ -8,7 +8,7 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -13,37 +13,25 @@ const grid = Array.from({ length: 5 }, () =>
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-const Calendar: React.FC = props => {
+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}>
-                {/* Empty cell in the top-left corner */}
+            <div className={styles.dayLabel}>{day}</div>
-                <div className={styles.day} />
-                {/* Displaying day labels */}
-                {daysOfWeek.map(day => (
-                    <div key={day} className={styles.day}>
-                        {day}
           </div>
-                ))}
+          {hoursOfDay.map((hour) => (
-            </div>
+            <div key={`${day}-${hour}`} className={styles.timeBlock}>
-            {/* Displaying the rest of the calendar */}
-            <div className={styles.timeAndGrid}>
-                <div className={styles.timeColumn}>
-                    {hoursOfDay.map(hour => (
-                        <div key={hour} className={styles.timeBlock}>
               <div className={styles.timeLabelContainer}>
-                                <p>
+                <span>{hour}:00</span>
-                                    {hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}
-                                </p>
               </div>
+              <CalendarCell />
             </div>
           ))}
         </div>
-                <div className={styles.calendarGrid}>{grid.map((row, rowIndex) => row)}</div>
+      ))}
-            </div>
     </div>
   );
 };