feat: calendar grid and grid cells (#81)

Longhorn-Developers · Mar 6, 2024 · bfeb239 · bfeb239
1 parent 2321540
commit bfeb239
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 36 deletions.
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -3,6 +3,7 @@
 
 .dayLabelContainer {
     display: flex;
+    flex-direction: row;
     height: 13px;
     min-width: 40px;
     min-height: 13px;
@@ -13,24 +14,44 @@
     flex: 1 0 0;
 }
 
-.dayLabel {
+.calendarGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+}
+
+.calendarRow {
+    display: flex;
+}
+
+.calendar {
+    // display: grid;
+    // grid-template-columns: auto repeat(5, 1fr);
+    gap: 10px;
+}
+
+.day {
+    gap: 5px;
     color: colors.$burnt_orange;
     text-align: center;
-    font-family: Roboto;
     font-size: 14.22px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }
 
-.calendar {
-    display: grid;
-    grid-template-columns: auto repeat(5, 1fr);
-    gap: 10px;
+.timeAndGrid {
+    display: flex;
 }
 
-.day {
-    gap: 5px;
+.timeColumn {
+    display: flex;
+    min-height: 573px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border-radius: var(--border-radius-none, 0px);
 }
 
 .timeBlock {
@@ -41,18 +62,32 @@
     max-width: 50px;
     min-height: 40px;
     flex-direction: column;
-    justify-content: flex-end;
     align-items: flex-end;
-}
 
-.timeLabelContainer {
-    display: flex;
-    max-height: 20px;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    gap: 17px;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: var(--border-radius-none, 0px);
+    .timeLabelContainer {
+        display: flex;
+        max-height: 20px;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 17px;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: var(--border-radius-none, 0px);
+    }
+
+    p {
+        color: #1a2024;
+        text-align: left;
+        height: 6.6px;
+        align-self: stretch;
+        margin-top: 0;
+        margin-bottom: 0;
+
+        /* Type scale/small */
+        font-family: 'Roboto Flex';
+        font-size: 14.22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    }
 }
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -3,8 +3,11 @@ import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const daysOfWeek = Object.values(DAY_MAP);
+const daysOfWeek = Object.values(DAY_MAP).filter(d => d != 'Saturday' && d != 'Sunday');
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+const grid = Array.from({ length: 5 }, () =>
+    Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
+);
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
@@ -13,22 +16,31 @@ const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 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>
+                ))}
+            </div>
+            {/* Displaying the rest of the calendar */}
+            <div className={styles.timeAndGrid}>
+                <div className={styles.timeColumn}>
                     {hoursOfDay.map(hour => (
-                        <div key={`${day}-${hour}`} className={styles.timeBlock}>
+                        <div key={hour} className={styles.timeBlock}>
                             <div className={styles.timeLabelContainer}>
-                                <span>{hour}:00</span>
+                                <p>
+                                    {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>
     );
 };

diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
@@ -7,13 +7,12 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    position: relative;
+    border: 1px solid #dadce0;
 }
 
 .hourLine {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    border-top: 1px solid black; /* Adjust line styles as needed */
+    width: 165px;
+    height: 1px;
+    border-radius: var(--border-radius-none, 0px);
+    background: rgba(218, 220, 224, 0.25);
 }