im trying to create a calendar with would like to look like a calendar. Buut i've got something missing because every created div's (days) are saved into the one and first cell. I dont know how to fix that. Thanks for any help 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>
)
}
days-grid is a grid and has only one child Month component, so if you want the grid works you must set many childs, for example the days component.
simple example:
const App = () => {
const myDays = [1,2,3,4,5,6,7,8,9,10,11]
const buildDays = (days)=>days
.map((cur,idx)=><div key={idx} className="my-day">{cur}</div>)
return(
<div className="my-grid">
{buildDays(myDays)}
</div>
);
}
some css:
.my-grid{
border: solid 2px royalblue;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 1px;
grid-row-gap: 1px;
}
.my-day{
display: flex;
justify-content: center;
align-items: center;
border: solid 2px royalblue;
}