如何解决CSS网格,Day.js,React:在基于网格的日历中,如何将具有特定日期的网格项推入具有相应日期的网格图块中?
我正在使用React创建一个基于Web的现场音乐指南。它将显示当前一周的所有演出。为此,我制作了一个CSS网格,并使用Day.js分配了当前的工作日和日期。我最终希望显示演出,以便使其与表演的日期相匹配,大致如下:
Monday | Tuesday |Wednesday |
October 5th 2020| October 6th 2020|October 7th 2020|
Monday gig 1 |Tuesday gig 1 |Wednesday gig 1|
Monday gig 2 |Tuesday gig 2 |Wednesday gig 2|
Monday gig 3 |Tuesday gig 3 |Wednesday gig 3|
我正在努力弄清楚该如何做-我需要以某种方式查找演出日期与并列日期之间是否存在匹配,然后将匹配的演出推入其正确的网格平方中。关于如何实现此目标的任何建议?
这是我到目前为止所做的。我已经使用css-grid和day.js创建了一个网格。这将创建7个网格正方形,每个正方形都有一个工作日和相应的日期-代码如下:
Grid component
import React,{useEffect,useState} from 'react'
import Giglisting from './Giglisting'
import axios from 'axios'
import dayjs from "dayjs";
import en from "dayjs/locale/en";
const Grid = () => {
const [gigs,setGigs] = useState([])
const [isLoading,setLoading] = useState(false)
useEffect(()=>{
setLoading(true)
axios.get('https://us-central1-gig-fort.cloudfunctions.net/api/getGigListings')
.then(res=> {
setGigs(res.data)
setLoading(false)
})
},[])
dayjs.locale({
...en,weekStart: 1
});
const startOfWeek = dayjs().startOf("week");
const weekdays = new Array(7)
.fill(startOfWeek)
.map((day,idx) => day.add(idx,"day")
.format("dddd,MMMM D "));
const grid = <div className="grid-container">
{weekdays.map((day) => (
<div key={day} className="grid-item">
<h3>{day}</h3>
</div>
))}
</div>
const loadingMessage = <h1 className = 'h1-loading'>gigs loading...</h1>
const display = isLoading === false ? grid : loadingMessage
return (
<>
{display}
</>
);
};
export default Grid
Grid CSS
.grid-container {
display: grid;
justify-items: center;
margin-top:5%;
grid-template-rows: repeat(3,200px);
grid-row-gap: 1px;
grid-template-columns: repeat(3,1fr);
grid-column-gap: 1px;
}
.grid-item {
color:#a5262b;
font-family: 'Canela-Medium',sans-serif;
width:auto;
width:80%;
}
在网格组件中,我正在进行数据库API调用,该调用将以以下形式返回演出数据:
[
{
date:"2020-10-05",genre:"Jazz",name:"Jazz quartet",price:"$10",tickets:"ticket URL",time:"21:30",venueName:"The Third Eye"
},{
date:"2020-10-06",genre:"Funk",name:"The Fades at Rogue",venueName:"Rogue and Vagabond"
},{
date:"2020-10-07",genre:"Latin",name:"Son Clave",venueName:"Havana"
}
]
所以这是主要问题:我需要映射此演出数据,然后将每个演出映射到网格中的正确日期
解决方法
我获取了所有代码,并使其在this sandbox中工作,
注意
- api的某些人将
date
返回为""
,并且创建日期存在(通常不存在),这是我们的要求 - 假设api日期格式为
YYYY-MM-DD
由于某些原因,有些日子缺少gigs
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。