I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
height: 100%;
position: relative;
grid-column-gap: 1px;
grid-row-gap: 1px;
border-top: solid 1px;
}
.calendar-day {
position: relative;
min-height: 100px;
font-size: 22px;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: 20px;
}
<React.Fragment>
<div className="calendar-month">
<CalendarHeader />
<div className="days-grid">
<Month month={currentMonth} />
</div>
</div>
</React.Fragment>
function Month({ month }) {
return (
<div>
{
month.map((row, i) => (
<React.Fragment key={i}>
{row.map((day, idx) => (
<Day day={day} key={idx} />
))}
</React.Fragment>
))
}
</div >
)
}
function Day({ day, rowIdx }) {
return (
<div className="calendar-day">
{day.format()}
</div>
)
}