From e630bc82eeb3d2fce045f38793d30604f8180b4a Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 22:23:03 -0600
Subject: [PATCH] Time Column Being Transported via Crane

---
 .../common/CalendarGrid/CalendarGrid.module.scss       | 10 ++++++++++
 .../components/common/CalendarGrid/CalendarGrid.tsx    |  7 +++++++
 2 files changed, 17 insertions(+)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index 72bb32c1..2f06af5e 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -40,6 +40,16 @@
     line-height: normal;
 }
 
+.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 {
     display: flex;
     width: 50px;
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index bc9504d6..025bd11d 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -31,6 +31,13 @@ const Calendar: React.FC = (props) => {
         ))}
       </div>
       {/* Displaying the rest of the calendar */}
+      <div className={styles.timeColumn}>
+        {hoursOfDay.map((hour) => (
+          <div key={hour} className={styles.timeLabelContainer}>
+            <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
+          </div>
+        ))}
+      </div>
       <div className={styles.calendarGrid}>
         {grid.map((row, rowIndex) => (
           row