我正在尝试创建一个开始日期灵活的单月日历组件，因此该月的第一天可以在任何工作日（即 M、T、W）开始。我设法创建了网格，但我正在努力获得开始的灵活性。谁能帮我弄清楚？
先感谢您。
逻辑 -图像
渲染结果 - 图像
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>反应JS
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)
}
}