javascript - 填写一个日历月的空白块

Question

我目前能够使用 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>
    </>
  );
}

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

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

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

标签： javascriptreactjsmomentjsdayjs