feat: add time column to Calendar Component
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user