填写一个日历月的空白块

如何解决填写一个日历月的空白块

我目前能够使用 JS 获取当前月份以及上个月和未来月份的给定日期。我想实现的是，如果说 12 月从星期二开始，我想在星期日和星期一传递空对象。 12 月也在星期四结束，所以我想传递星期五和星期六的空对象。

我目前用来获取每个日历月并显示它们的代码如下：

import React,{ useState,useEffect } from "react";
import "./styles.scss";
import dayjs from "dayjs";

export default function App() {
  const [dates,setDates] = useState(null);
  const [inc,setIncrement] = useState(0);

  const getDaysArray = async (firstDay,lastDay) => {
    let dates = [];

    while (firstDay <= lastDay) {
      dates.push(firstDay);
      firstDay = dayjs(firstDay).add(1,"days").format("YYYY-MM-DD");
    }

    return dates;
  };

  useEffect(() => {
    const getInitial = async () => {
      const firstDay = dayjs().startOf("month").format("YYYY-MM-DD");
      const lastDay = dayjs(firstDay).endOf("month").format("YYYY-MM-DD");
      const dates = await getDaysArray(firstDay,lastDay);
      setDates(dates);
    };
    getInitial();
  },[]);

  const fetchMonth = async (inc) => {
    setIncrement(inc);
    const firstDay = dayjs()
      .subtract(inc,"months")
      .startOf("month")
      .format("YYYY-MM-DD");
    const lastDay = dayjs(firstDay).endOf("month").format("YYYY-MM-DD");
    const dates = await getDaysArray(firstDay,lastDay);
    setDates(dates);
  };

  return (
    <>
      <button onClick={() => fetchMonth(inc + 1)}>DECREMENT</button>
      <button onClick={() => fetchMonth(inc - 1)}>INCREMENT</button>
      <div className="cal">
        <div className="cal-div1"></div>
        <div className="cal-div2 "></div>
        <div className="cal-div3 cal-cir-hov"></div>
        <div className="cal-div4"> SUN </div>
        <div className="cal-div5"> MON </div>
        <div className="cal-div6"> TUE </div>
        <div className="cal-div7"> WED </div>
        <div className="cal-div8"> THU </div>
        <div className="cal-div9"> FRI </div>
        <div className="cal-div10"> SAT </div>
        {dates &&
          dates.map((r,i) => {
            return (
              <div style={{ color: "#565254" }} key={i} className="cal-cir-hov">
                {r}
              </div>
            );
          })}
      </div>
    </>
  );
}

我尝试这样做的原因是我创建的网格。就目前而言，每个月都从星期日开始，我没有成功地将月份中的正确日期与日历上的日期配对。例如，十二月从星期二开始，但我的造型显示它从星期日开始，任何帮助将不胜感激。控制台日志当前显示每个月应该开始和结束的日期。

我不确定如何在日历上应该为空的日子将空字符串推送到我的数组中。

附上调试用的代码笔：https://codesandbox.io/s/intelligent-cartwright-dm8go?file=/src/App.js:0-2006