feat: add time column to Calendar Component

This commit is contained in:
2024-02-05 22:23:03 -06:00
committed by doprz
parent 0ba61534cb
commit 9d6821127e
2 changed files with 17 additions and 0 deletions

View File

@@ -40,6 +40,16 @@
line-height: normal; 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 { .timeBlock {
display: flex; display: flex;
width: 50px; width: 50px;

View File

@@ -31,6 +31,13 @@ const Calendar: React.FC = (props) => {
))} ))}
</div> </div>
{/* Displaying the rest of the calendar */} {/* 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}> <div className={styles.calendarGrid}>
{grid.map((row, rowIndex) => ( {grid.map((row, rowIndex) => (
row row