CSS网格Day.js：如何创建显示当前星期日期的日历？

如何解决CSS网格Day.js：如何创建显示当前星期日期的日历？

在react组件中，我想创建一个网格日历，以显示当前星期的日期。因此，例如在本周，它需要看起来像这样：

Monday          | Tuesday         |Wednesday       |        
October 5th 2020| October 6th 2020|October 7th 2020|

我已经尝试使用day.js解决这个问题，但是事实证明这很棘手。这是我在codesanbox中的尝试：

https://codesandbox.io/s/sleepy-rgb-me4s3?file=/src/App.js

关于如何处理此问题的任何建议？我不确定如何将每个网格的开始设置为给定一周的星期一-完成此操作后，我就可以弄清楚在其他日子做的逻辑。

这是代码：

Grid component

import React from "react";
import "./styles.css";
import dayjs from 'dayjs'

export default App = () => {

  let now = dayjs()
  let currentDay = (now.format("dddd,MMMM D YYYY"))

  let d = now.add('1','day')
  let nextDay = (d.format("dddd,MMMM D YYYY"))
  
  return(
    <div className = 'grid-container'>
      <div className = 'grid-item'>{currentDay}</div>
      <div className = 'grid-item'>{nextDay}</div>
      <div className = 'grid-item'></div>
      <div className = 'grid-item'></div>
      <div className = 'grid-item'></div>
      <div className = 'grid-item'></div>
      <div className = 'grid-item'></div>
    </div>
  )
}

styles.css

.grid-container {
  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-row-gap:1px;
  grid-template-columns: 100px 100px 100px;
  grid-column-gap: 1px;
}

.grid-item {
  background-color: blue;
  color:white;
}

解决方法

您可以使用startOf('week')来获取当前一周的第一天，然后构造一个包含该周所有7天的数组来呈现它：

export default () => {
  const startOfWeek = dayjs().startOf("week");

  const weekdays = new Array(7).fill(startOfWeek).map(
    (day,idx) => day.add(idx,"day").format("dddd,MMMM D YYYY")
  );

  return (
    <div className="grid-container">
      {weekdays.map((day) => (
        <div key={day} className="grid-item">
          {day}
        </div>
      ))}
    </div>
  );
};

根据语言环境，一周的开始可能会有所不同。您可以通过setting it in the locale将一周的开始配置为星期一：

import en from "dayjs/locale/en";

dayjs.locale({
  ...en,weekStart: 1
});

如果您不想修改语言环境，也可以使用day(1)来获取当前一周的星期一：

const startOfWeek = dayjs().day(1); // will be the monday of the current week with the default locale