최종 화면 맛보기
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로는 days 를 넘겨줘서 data에서 그 날짜에 맞는경우 보여주는것이다.
data전체를 훑어서 보여주는거라서 상당히 비효율적이지만
n번만에 끝나서 한사람의 데이터가 많아봤자 억단위로 안갈것 같아서 당분간은 이렇게 사용할것같다...
key 값은 i , index로 넣어줬고
css는 이것을 넣었다.
.calendar_body_days_event{
font-size: 15px;
background: gray;
color: white;
border-radius: 5px;
padding: 2px;
margin: 1px;
}
아직 데이터구조는 다 안짜서 백엔드를 시작을 못했다..
퍼블리싱을 먼저 하고 데이터 구조를 잡아야겠다.