现在，我有每个div的占位符日期，并且我已经分别创建了每个div。我希望相应地显示日期，类似于windows 10的日历，但我不确定日历日期的显示方式中存在什么数学模式/算法。例如，2021年7月的第一天应该是星期四，之前的3个div显示了上个月的3天（2021年6月；28, 29, 30). 对于一年中的每个月，这种模式都应该是递归的。

我已经在这个问题上纠缠了一段时间，我不确定为每个日期创建一个div是否是一种有效的方法，因为没有一个div是动态的。

import React from "react";
import styled from "styled-components";
const Wrapper = styled.div``;
const Row = styled.div`
  display: flex;
`;
const MedDiv = styled.div`
  height: 145px;
  width: 225px;
  border: 1px solid #e0e0e0;
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
  padding: 5px;
`;
const TableRowsMonth = () => {
  return (
    <Wrapper>
      <Row>
        <MedDiv>1</MedDiv>
        <MedDiv>2</MedDiv>
        <MedDiv>3</MedDiv>
        <MedDiv>4</MedDiv>
        <MedDiv>5</MedDiv>
        <MedDiv>6</MedDiv>
        <MedDiv>7</MedDiv>
      </Row>
      <Row>
        <MedDiv>1</MedDiv>
        <MedDiv>2</MedDiv>
        <MedDiv>3</MedDiv>
        <MedDiv>4</MedDiv>
        <MedDiv>5</MedDiv>
        <MedDiv>6</MedDiv>
        <MedDiv>7</MedDiv>
      </Row>
      <Row>
        <MedDiv>1</MedDiv>
        <MedDiv>2</MedDiv>
        <MedDiv>3</MedDiv>
        <MedDiv>4</MedDiv>
        <MedDiv>5</MedDiv>
        <MedDiv>6</MedDiv>
        <MedDiv>7</MedDiv>
      </Row>
      <Row>
        <MedDiv>1</MedDiv>
        <MedDiv>2</MedDiv>
        <MedDiv>3</MedDiv>
        <MedDiv>4</MedDiv>
        <MedDiv>5</MedDiv>
        <MedDiv>6</MedDiv>
        <MedDiv>7</MedDiv>
      </Row>
      <Row>
        <MedDiv>1</MedDiv>
        <MedDiv>2</MedDiv>
        <MedDiv>3</MedDiv>
        <MedDiv>4</MedDiv>
        <MedDiv>5</MedDiv>
        <MedDiv>6</MedDiv>
        <MedDiv>7</MedDiv>
      </Row>
    </Wrapper>
  );
};
export default TableRowsMonth;