Commit a11b53c0 authored by Kim, Subin's avatar Kim, Subin
Browse files

Calender 컴포넌트 만드는 중...

parent d0ba02b7
...@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => { ...@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') }) dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
lastWeek.add(1, 'days') lastWeek.add(1, 'days')
} }
console.log("arr=", dateArr) const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}>
console.log("same==", moment(oneDay).isSame('2021-08-07')) {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""}
const resultArr = dateArr.map(el => <div onClick={() => setSelectDate(el.date)}> <div className={"d-flex flex-column " + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
{moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong>{moment(el.date).format('YYYY.MM')}</strong> : ""} <strong className={moment(el.date).isSame(oneDay) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
<div> <strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
<strong>{moment(el.date).format('DD')}</strong>
<em>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</em>
</div> </div>
</div>) </div>)
setDateList(resultArr) setDateList(resultArr)
...@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => { ...@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
return ( return (
<> <>
{console.log("date==", selectDate)} {console.log("date==", selectDate)}
<div> <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
<i className="bi bi-chevron-left"></i> <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender}`}></i>
{dateList.map(el => el)} <i className="col-1 bi bi-chevron-left align-self-center text-center"></i>
<i className="bi bi-chevron-right"></i> <div className={`d-flex col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
<i className="col-1 bi bi-chevron-right align-self-center text-center"></i>
</div> </div>
</> </>
) )
......
.box {
overflow: hidden;
& .yearmonth {
position: relative;
top: 0;
width: 100%;
font-size: 10px;
}
& .selectDate {
background-color: #000;
color: #fff;
border-radius: 50%;
}
}
.calender {
right: 13px;
font-size: 1.5em;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment