Estoy tratando de crear un calendario que me gustaría parecerse a un calendario. Pero me falta algo porque todos los div (días) creados se guardan en la primera celda. No se como arreglar eso. Gracias por cualquier ayuda 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 es una grilla y tiene only one child Month component , por lo que si desea que la grilla funcione, debe configurar muchos elementos secundarios, por ejemplo, el days component . ejemplo sencillo:
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> ); }algo de 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; }