feat: add time column to Calendar Component

Longhorn-Developers · Mar 6, 2024 · 9d68211 · 9d68211
1 parent 0ba6153
commit 9d68211
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git 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
@@ -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