Time Column Being Transported via Crane

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;

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