Skip to content

GitLab

Commit 64032ed9 authored by Kim, Subin's avatar Kim, Subin
Browse files

Calender 가로 수정..

parent 3916c374
Hide whitespace changes
Inline Side-by-side
client/src/components/Calender/HorizontalCalender.js
View file @ 64032ed9
...@@ -37,50 +37,28 @@ const Calender = ({ selectDate, setSelectDate }) => { ...@@ -37,50 +37,28 @@ const Calender = ({ selectDate, setSelectDate }) => {
function getDate(oneDay) { function getDate(oneDay) {
let dateArr = [] let dateArr = []
let lastWeek = moment(oneDay).subtract(7, 'days') let lastWeek = moment(oneDay).clone().subtract(6, 'days')
const nextWeek = moment(oneDay).add(7, 'days') const nextWeek = moment(oneDay).clone().add(12, 'days')
while (lastWeek.isBefore(nextWeek)) { while (lastWeek.isBefore(nextWeek)) {
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')
} }
const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}> const resultArr = dateArr.map(el => <div className="align-self-end text-center" onClick={() => setSelectDate(el.date)}>
{moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""} {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : <p style={{ padding: "4px" }}></p>}
<div className={`d-flex flex-column ${styles.cursor} ` + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}> <div className={`d-flex flex-column ${styles.cursor} ` + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
<strong className={moment(el.date).isSame(oneDay) ? (/admin/g.test(history.location.pathname) ? styles.selectDate : styles.selectatHome) : ""}>{moment(el.date).format('DD')}</strong> <strong className={moment(el.date).isSame(oneDay) ? (/admin/g.test(history.location.pathname) ? styles.selectDate : styles.selectatHome) : ""}>{moment(el.date).format('DD')}</strong>
<strong>{moment(el.date).isSame(moment().format('YYYY-MM-DD')) ? "오늘" : week[el.day]}</strong> <strong>{(moment(el.date).isSame(moment().format('YYYY-MM-DD')) && moment(el.date).isSame(selectDate)) ? "오늘" : week[el.day]}</strong>
</div> </div>
</div>) </div>)
setDateList(resultArr) setDateList(resultArr)
} }
function preWeek() {
const preDate = moment(date).week()
console.log("week==",preDate)
// let dateArr = []
// dateArr = Array(7).fill(0).map((n, i) => {
// let current = moment(oneDay).add((n + i), 'days')
// return <div className="col-auto align-self-end text-center" onClick={() => setSelectDate(current)}>
// {current.isSame(oneDay) || current.format("DD") === "01" ? <strong className={styles.yearmonth}>{current.format('YYYY.MM')}</strong> : ""}
// <div className={`d-flex flex-column ${styles.cursor} ` + ((current.format("d") === "0" || current.format("d") === "6") ? ((current.format("d") === "0") ? "text-danger" : "text-primary") : "")}>
// <strong className={current.isSame(oneDay) ? styles.selectDate : ""}>{current.format('DD')}</strong>
// <strong>{current.isSame(oneDay) ? "오늘" : week[Number(current.format("d"))]}</strong>
// </div>
// </div>
// })
// console.log("Dadsa--===", dateArr)
// setWeekly(dateArr)
}
function nextWeek() {
}
return ( return (
<> <>
{console.log("date==", selectDate)} {console.log("date==", selectDate)}
<div className="d-flex position-relative border-bottom border-dark border-2 p-3"> <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
<i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender} ${styles.cursor}`} data-bs-toggle="modal" data-bs-target="#calenderModal"></i> <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender} ${styles.cursor}`} data-bs-toggle="modal" data-bs-target="#calenderModal"></i>
<div className="modal" id="calenderModal" tabindex="-1" aria-labelledby="calenderModal" aria-hidden="true"> <div className="modal" id="calenderModal" tabIndex="-1" aria-labelledby="calenderModal" aria-hidden="true">
<div className={`modal-dialog position-absolute bg-white ${styles.datepicker}`}> <div className={`modal-dialog position-absolute bg-white ${styles.datepicker}`}>
<div className="modal-content"> <div className="modal-content">
<div className="modal-body px-1 pt-1 pb-0"> <div className="modal-body px-1 pt-1 pb-0">
...@@ -104,9 +82,23 @@ const Calender = ({ selectDate, setSelectDate }) => { ...@@ -104,9 +82,23 @@ const Calender = ({ selectDate, setSelectDate }) => {
</div> </div>
</div> </div>
</div> </div>
<i className={`col-1 bi bi-chevron-left align-self-center text-center ${styles.cursor}`} onClick={preWeek}></i> <i className={`bi bi-chevron-left carousel-control-prev align-self-center text-center ${styles.cursor} ${/admin/g.test(history.location.pathname) ? " text-dark" : " text-white"}`} data-bs-target="#carouselWeek" data-bs-slide="prev"></i>
<div className={`d-flex justify-content-between col-10 ${styles.box}`}>{dateList.map(el => el)}</div> <div className="w-100">
<i className={`col-1 bi bi-chevron-right align-self-center text-center ${styles.cursor}`} onClick={nextWeek}></i> <div id="carouselWeek" className="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div className="carousel-inner">
<div className="carousel-item">
<div className="d-flex justify-content-evenly">{dateList[0]}{dateList[1]}{dateList[2]}{dateList[3]}{dateList[4]}{dateList[5]}</div>
</div>
<div className="carousel-item active">
<div className="d-flex justify-content-evenly">{dateList[6]}{dateList[7]}{dateList[8]}{dateList[9]}{dateList[10]}{dateList[11]}</div>
</div>
<div className="carousel-item">
<div className="d-flex justify-content-evenly">{dateList[12]}{dateList[13]}{dateList[14]}{dateList[15]}{dateList[16]}{dateList[17]}</div>
</div>
</div>
</div>
</div>
<i className={`bi bi-chevron-right carousel-control-next align-self-center text-center ${styles.cursor} ${/admin/g.test(history.location.pathname) ? " text-dark" : " text-white"}`} data-bs-target="#carouselWeek" data-bs-slide="next"></i>
</div> </div>
</> </>
) )
......
client/src/components/Calender/calender.module.scss
View file @ 64032ed9
.box { .yearmonth {
overflow: hidden; position: relative;
transform: translate3d(-420px, 0px, 0px); top: 0;
transition: all 0.6s ease 0s; width: 100%;
font-size: 10px;
& .yearmonth {
position: relative;
top: 0;
width: 100%;
font-size: 10px;
}
} }
.calender { .calender {
......
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