reactjs - CSS 网格,Day.js:如何创建显示当前星期日期的日历?
问题描述
在反应组件中,我想创建一个显示当前星期日期的网格日历。因此,例如本周,它需要看起来像这样:
Monday | Tuesday |Wednesday |
October 5th 2020| October 6th 2020|October 7th 2020|
我玩过 day.js 来尝试解决这个问题,但事实证明这很棘手。这是我在codesanbox中的尝试:
https://codesandbox.io/s/sleepy-rgb-me4s3?file=/src/App.js
关于如何解决这个问题的任何建议?我不确定如何将每个网格的开始设置为给定一周的星期一 - 一旦我这样做了,我就可以弄清楚其他日子的逻辑。
这是代码:
Grid component
import React from "react";
import "./styles.css";
import dayjs from 'dayjs'
export default App = () => {
let now = dayjs()
let currentDay = (now.format("dddd, MMMM D YYYY"))
let d = now.add('1', 'day')
let nextDay = (d.format("dddd, MMMM D YYYY"))
return(
<div className = 'grid-container'>
<div className = 'grid-item'>{currentDay}</div>
<div className = 'grid-item'>{nextDay}</div>
<div className = 'grid-item'></div>
<div className = 'grid-item'></div>
<div className = 'grid-item'></div>
<div className = 'grid-item'></div>
<div className = 'grid-item'></div>
</div>
)
}
styles.css
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-row-gap:1px;
grid-template-columns: 100px 100px 100px;
grid-column-gap: 1px;
}
.grid-item {
background-color: blue;
color:white;
}
解决方案
您可以使用startOf('week')
获取当前一周的第一天,然后构造一个包含该周所有 7 天的数组来呈现它:
export default () => {
const startOfWeek = dayjs().startOf("week");
const weekdays = new Array(7).fill(startOfWeek).map(
(day, idx) => day.add(idx, "day").format("dddd, MMMM D YYYY")
);
return (
<div className="grid-container">
{weekdays.map((day) => (
<div key={day} className="grid-item">
{day}
</div>
))}
</div>
);
};
根据地区的不同,一周的开始可能会有所不同。您可以通过在 locale 中设置来将一周的开始时间设置为星期一:
import en from "dayjs/locale/en";
dayjs.locale({
...en,
weekStart: 1
});
如果您不想修改语言环境,您也可以使用它day(1)
来获取本周的星期一:
const startOfWeek = dayjs().day(1); // will be the monday of the current week with the default locale
推荐阅读
- javascript - 如何为这个用 javascript 制作的日历添加工具提示
- c# - AutoMapperMappingException 奇怪的行为
- javascript - 使用我的脚本从 XML 获取属性
- rust - 带有 where 子句的不可用特征
- sql - 如果我使用的是 postGIS,如果我已经存储了几何列,是否应该存储纬度和长列?
- python - pyenv local/global 在 catalina 上不起作用
- c++ - 如果 (static_cast
(x)) 与如果 (x) - compression - 图像压缩
- html - 将超链接显示为图标而不是文本
- spring - 无法在 Spring Application 中使用 Google 和 Oauth2 从 SSO 中的 UserProfile 信息获取电子邮件信息