応答計画プロジェクトデータの挿入

41164 ワード
フロント はんのう テキストリンク

データの挿入



エンドスクリーンエクスペリエンス

データの作成


data.json
{
    "work": [
      {
        "start": "2021-09-16",
        "end": "2021-09-16",
        "title" : "제목임",
        "data" : "뭔일있냐"
        },
      {
        "start": "2021-09-13",
        "end": "2021-09-13",
        "data" : "뭔일없음"
        }
          ,
      {
        "start": "2021-09-14",
        "end": "2021-09-14",
        "data" : "뭔일있음"
        },
    {
        "start": "2021-09-14",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    },
    {
        "start": "2021-10-12",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    },
    {
        "start": "2021-10-11",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    },
    {
        "start": "2021-10-13",
        "end": "2021-09-14",
        "data" : "한개 더 있음"
    }
        
    ]
  }
一時的にデータを作成します.
上import pr_data from './data/data.json'importの提供
完全なコード
App.js
import './App.css';
import { useState } from 'react';
import moment from 'moment';
import pr_data from './data/data.json'
import './assets/css/calendar.scss'
const App = () => {

  const [getMoment, setMoment] = useState(moment());

  const today = getMoment;
  const firstWeek = today.clone().startOf('month').week();
  const lastWeek = today.clone().endOf('month').week() === 1 ? 53 : today.clone().endOf('month').week();

  const calendarArr = () => {

    let result = [];
    let week = firstWeek;
    for (week; week <= lastWeek; week++) {
      result = result.concat(
        <div className='calendar_body_line' key={week}>
          {
            Array(7).fill(0).map((data, index) => {
              let days = today.clone().startOf('year').week(week).startOf('week').add(index, 'day'); //d로해도되지만 직관성

              if (moment().format('YYYYMMDD') === days.format('YYYYMMDD')) {
                return (
                  <div className='calendar_body_days' onClick={() => console.log(days.format('YYYYMMDD'))} key={index} >
                    <span style={{ color: 'red' }}>{days.format('D')}</span>
                    <Show_event days={days} />
                  </div>
                );
              } else if (days.format('MM') !== today.format('MM')) {
                return (
                  <div className='calendar_body_days' onClick={() => console.log(days.format('YYYYMMDD'))} key={index} >
                    <span style={{ color: 'gray' }}>{days.format('D')}</span>
                  </div>
                );
              } else {
                return (
                  <div className='calendar_body_days' onClick={() => console.log(days.format('YYYYMMDD'))} key={index}  >
                    <span>{days.format('D')}</span>
                    <Show_event days={days} />
                  </div>
                );
              }
            })
          }
        </div>
      );
    }
    return result;
  }

  return (
    <div className="App">
      <div className="calendar_head">
        <button className='calendar_button' onClick={() => { setMoment(getMoment.clone().subtract(1, 'month')) }} >이전달</button>
        <div className='calendar_head_text'>{today.format('YYYY 년 MM 월')}</div>
        <button className='calendar_button' onClick={() => { setMoment(getMoment.clone().add(1, 'month')) }} >다음달</button>
      </div>
      <div className='calendar_body'>
        <div className='calendar_body_box'>
          <Day_kor />
          {calendarArr()}
        </div>
      </div>
    </div>
  );
}
export default App;

function Show_event({ days }) {
  return (
    <>
      {
        pr_data.work.map((v, i) => {
          if (days.format('YYYYMMDD') == moment(v.start).format('YYYYMMDD')) {
            return <div key={i} onClick={() => console.log(v)} className='calendar_body_days_event'>{v.data}</div>
          }
        })
      }
    </>
  )
}

function Day_kor() {
  return (
    <>
      <div className='calendar_body_head'>
        <div className='calendar_body_head_days'>
          일
        </div>
        <div className='calendar_body_head_days'>
          월
        </div>
        <div className='calendar_body_head_days'>
          화
        </div>
        <div className='calendar_body_head_days'>
          수
        </div>
        <div className='calendar_body_head_days'>
          목
        </div>
        <div className='calendar_body_head_days'>
          금
        </div>
        <div className='calendar_body_head_days'>
          토
        </div>
      </div>
    </>
  )
}
show event関数を作成し、画面に表示します.
function Show_event({ days }) {
  return (
    <>
      {
        pr_data.work.map((v, i) => {
          if (days.format('YYYYMMDD') == moment(v.start).format('YYYYMMDD')) {
            return <div key={i} onClick={() => console.log(v)} className='calendar_body_days_event'>{v.data}</div>
          }
        })
      }
    </>
  )
}
propsとは、日数をデータに渡し、データに日付が一致する場合を表示することです.
データ全体を巡るので、かなり効率が悪い.
n回で終わり、一人分のデータが多くても憶測にはならないので、しばらくはこのように使います...
key値はi,index
cssはこれを加えた.
.calendar_body_days_event{
	font-size: 15px;
	background: gray;
	color: white;
	border-radius: 5px;
	padding: 2px;
	margin: 1px;
}
データ構造はまだ編成されていないので、バックエンドは開始されません.
まずPublishingを行い、データ構造を作成します.
[プログラマ#JS]最大化式
選択ソート(Selection Sort)