使用网格模板创建日历答案

【问题标题】：creating calendar with grid-temlate使用网格模板创建日历
【发布时间】：2022-02-05 12:51:04
【问题描述】：

我正在尝试创建一个看起来像日历的日历。但是我缺少一些东西，因为每个创建的 div（天）都保存到一个也是第一个单元格中。我不知道如何解决。谢谢你的帮助 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>
    )
}

【问题讨论】：

标签： javascript css reactjs calendar

【解决方案1】：

days-grid 是一个网格并且有only one child Month component，所以如果你想要网格工作，你必须设置许多孩子，例如days component。简单的例子：

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>
  );
}

一些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;
}

【讨论】：