ReactJS - 如何建立一个日历组件的灵活的开始日期？

Question

我想创建一个单月日历组件其中起始日期是灵活的，因此该月的第一天，任何工作日（即M，T，W）时可以启动。我设法建立网格，但我挣扎着想要开始灵活性。谁能帮我弄明白？

先感谢您。

逻辑 - Image

渲染结果 - Image

JavaScript的

$(function(){  
  var $container = $("#container");
  var boxCount = 31,
      rowLength = 7,
      boxSize = 414 / 7;
  
  for(var i=0; i<boxCount; i++){
    var $box = $("<div/>")
      .attr("class", "box")
      .css({
        left: i%rowLength * boxSize  + "px",
        top: Math.floor(i/rowLength) * boxSize
      })
      .appendTo($container);
  }
  
});

#container{
  position: relative;
}
.box{
  position: absolute;
  width: 50px;
  height: 50px;
  background: #eee;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

ReactJS

import * as React from 'react'
import { PropertyControls, ControlType } from 'framer'

// Define type of property
interface Props {
    width: number
    height: number
    text: string
    number: number
}

export class Calendar extends React.Component<Props> {
    // Set default properties
    static defaultProps = {
        text: 'January',
        number: 31,
    }

    // Items shown in property panel
    static propertyControls: PropertyControls = {
        text: { type: ControlType.String, title: 'Month' },

        number: {
            type: ControlType.Number,
            title: 'Number',
            min: 0,
            max: 100,
            step: 1,
            displayStepper: true,
        },
    }

    render() {
        const createCalendar = (month, number, width, height) => {
            var rowLength = 7,
                boxWidth = width / rowLength,
                boxHeight = height / rowLength,
                times = 2

            // const leftPos = i => {
            //  console.log((i % rowLength) * boxWidth)
            //  var offset = boxWidth * times
            //  if (i < rowLength - times) {
            //      var offset = boxWidth * times
            //      return (i % rowLength) * boxWidth + offset
            //  } else if (i >= 5 && i <= 6) {
            //      return (i % (rowLength - times)) * boxWidth
            //  } else if (i >= rowLength) {
            //      return (i % rowLength) * boxWidth + offset
            //  }
            // }

            // LOGIC
            const leftPos = i => {
                console.log((i % rowLength) * boxWidth)
                var offset = boxWidth * times
                if (i < rowLength - times) {
                    var offset = boxWidth * times
                    return (i % 5) * boxWidth + offset
                } else {
                    return (i % 5) * boxWidth
                }
            }

            const topPos = i => {
                return Math.floor(i / (rowLength - times)) * boxHeight
            }

            const res = [ ...Array(number) ].map((_, i) => {
                return (
                    <div
                        style={{
                            position: 'absolute',
                            width: boxWidth,
                            height: boxHeight,
                            // left: (i % rowLength) * boxWidth + boxWidth * 2,
                            left: leftPos(i),
                            // top: Math.floor(i / rowLength) * boxHeight,
                            top: topPos(i),
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            textAlign: 'center',
                            color: '#8855FF',
                            background: 'rgba(136, 85, 255, 0.1)',
                            overflow: 'hidden',
                        }}
                        key={i}
                    >
                        {i + 1}
                    </div>
                )
            })
            return (
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                    }}
                >
                    <div
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: `center`,
                            textAlign: 'center',
                            width: '100%',
                            height: boxHeight,
                            color: '#8855FF',
                            background: 'rgba(136, 85, 255, 0.1)',
                        }}
                    >
                        {month}
                    </div>
                    <div style={{ position: 'relative' }}>{res}</div>
                </div>
            )
        }
        return createCalendar(this.props.text, this.props.number, this.props.width, this.props.height)
    }
}

Answer 1

你可以尝试像日期FNS库：https://date-fns.org/docs/Getting-Started

与dateFns.startOfWeek(dateFns.startOfMonth(new Date()))启动一个月（或你想要的日期是星期的开始），并隐藏其他天的CSS：https://codepen.io/pen/ZwrQZg