CSS网格，Day.js，React：在基于网格的日历中，如何将具有特定日期的网格项推入具有相应日期的网格图块中？

本文介绍了CSS网格，Day.js，React：在基于网格的日历中，如何将具有特定日期的网格项推入具有相应日期的网格图块中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用React创建一个基于网络的现场音乐指南。它将显示当前一周的所有演出。为此，我制作了一个CSS网格，并使用Day.js分配了当前的工作日和日期。我最终希望显示演出，以便使其与表演的日期相匹配，大致如下：

I'm creating a web-based live music guide using React. It will show all the gigs for the current week. To accomplish this, I made a CSS grid, and assigned the current weekdays and dates using Day.js. I eventually want to display gigs so that they're matched with the day on which they're being performed, roughly as follows:

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|

我正在努力弄清楚该如何做-我需要以某种方式查找演出之间是否存在匹配日期和网格日期，然后将匹配的演出推送到正确的网格方块中。关于如何实现此目标的任何建议？

I'm struggling to figure out how to do this- I need to somehow find if there is a match between the gig date and the grid date, and push matching gigs into their correct grid square. Any suggestions on how I can accomplish this?

这是我到目前为止所做的。我使用CSS-grid和day.js创建了一个网格。这将创建7个网格正方形，每个网格正方形都有一个工作日和相应的日期-代码如下：

Here's what I've done so far. I've created a grid using CSS-grid and day.js. This creates 7 grid squares, each with a weekday and corresponding date - code as follows:

网格组件

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

网格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调用，该调用将在格式如下：

In the grid component, I'm making a database API call that will return gig data in the following form:

[
    {
    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",
    price:"$10",
    tickets:"ticket URL",
    time:"21:30",
    venueName:"Rogue and Vagabond"
    },
    {
    date:"2020-10-07",
    genre:"Latin",
    name:"Son Clave",
    price:"$10",
    tickets:"ticket URL",
    time:"21:30",
    venueName:"Havana"
    }
]

所以这是主要问题：我需要对此进行映射演出数据，然后将每个演出映射到网格中的正确日期

在基于网格的日历中

CSS网格，Day.js，React：在基于网格的日历中，如何将具有特定日期的网格项推入具有相应日期的网格图块中？

问题描述

推荐答案