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

Calender 수정 중

parent 79b0adad
import { useState, useEffect } from "react";
import moment from "moment";
import styles from "./calender.module.scss";
const DatePicker = ({ selectDate, setSelectDate, month }) => {
const [week, setWeek] = useState([])
useEffect(() => {
generate()
}, [month])
function generate() {
const weekly = []
const startWeek = moment(month.cur).startOf('month').week()
const endWeek = moment(month.cur).endOf('month').week() === 1 ? 53 : moment(month.cur).endOf('month').week()
for (let week = startWeek; week <= endWeek; week++) {
weekly.push(<tr key={week}>{
Array(7).fill(0).map((n, i) => {
let current = moment(month.cur).clone().week(week).startOf('week').add(n + i, 'day')
let isSelected = moment(selectDate).format('YYYYMMDD') === current.format('YYYYMMDD') ? `${styles.selectDate}` : ''
let isColor = current.format('MM') !== moment(month.cur).format('MM') ? 'text-secondary ' : ((i === 0) ? "text-danger" : (i === 6) ? "text-primary" : "")
return <td className={`text-center p-1 ${styles.cursor}`} key={i} data-bs-dismiss="modal" onClick={() => setSelectDate(current.format('YYYY-MM-DD'))}>
<span className={`d-block ${isColor} ${isSelected}`}>{current.format('D')}</span>
</td>
})}</tr>)
}
setWeek(weekly)
}
return (
<tbody>{week.length !== 0 ? week.map(row => row) : ''}</tbody>
)
}
export default DatePicker
\ No newline at end of file
import { useState, useEffect } from "react";
import moment from "moment";
import DatePicker from "./DatePicker.js";
import styles from "./calender.module.scss";
const Calender = ({ selectDate, setSelectDate }) => {
const [dateList, setDateList] = useState([])
const [week, setWeek] = useState(["", "", "", "", "", "", ""])
const [month, setMonth] = useState({ pre: moment(selectDate).subtract(1, 'months').format('YYYY-MM'), cur: moment(selectDate).format('YYYY-MM'), next: moment(selectDate).add(1, 'months').format('YYYY-MM') })
useEffect(() => {
setMonth({ ...month, pre: moment(selectDate).subtract(1, 'months').format('YYYY-MM'), cur: moment(selectDate).format('YYYY-MM'), next: moment(selectDate).add(1, 'months').format('YYYY-MM') })
getDate(selectDate)
}, [])
}, [selectDate])
function getDate(oneDay) {
let dateArr = []
......@@ -20,7 +23,7 @@ const Calender = ({ selectDate, setSelectDate }) => {
}
const resultArr = dateArr.map(el => <div className="col-2 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> : ""}
<div className={"d-flex flex-column " + ((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) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
<strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
</div>
......@@ -29,13 +32,37 @@ const Calender = ({ selectDate, setSelectDate }) => {
}
return (
<>
<>
{console.log("date==", selectDate)}
<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}`}></i>
<i className="col-1 bi bi-chevron-left align-self-center text-center"></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-dialog position-absolute bg-white ${styles.datepicker}`}>
<div className="modal-content">
<div className="modal-body px-1 pt-1 pb-0">
<div className="d-flex justify-content-between bg-dark rounded py-1">
<i className={`bi bi-chevron-left align-self-center text-center text-white ${styles.cursor}`} onClick={() => setMonth({ ...month, pre: moment(month.pre).subtract(1, 'months').format('YYYY-MM'), cur: month.pre, next: month.cur })}></i>
<div className="text-white">{moment(month.cur).format('YYYY년 MM월')}</div>
<i className={`bi bi-chevron-right align-self-center text-center text-white ${styles.cursor}`} onClick={() => setMonth({ ...month, pre: month.cur, cur: month.next, next: moment(month.next).add(1, 'months').format('YYYY-MM') })}></i>
</div>
<table className="table mb-0">
<thead>
<tr>{week.map(day => <th>{day}</th>)}</tr>
</thead>
<DatePicker selectDate={selectDate} setSelectDate={setSelectDate} month={month} />
<tfoot>
<tr>
<td colSpan="7" align="center"><button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} data-bs-dismiss="modal" onClick={() => setSelectDate(moment().format('YYYY-MM-DD'))}>오늘</button></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<i className={`col-1 bi bi-chevron-left align-self-center text-center ${styles.cursor}`}></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>
<i className={`col-1 bi bi-chevron-right align-self-center text-center ${styles.cursor}`}></i>
</div>
</>
)
......
......@@ -7,15 +7,32 @@
width: 100%;
font-size: 10px;
}
& .selectDate {
background-color: #000;
color: #fff;
border-radius: 50%;
}
}
.calender {
right: 13px;
font-size: 1.5em;
}
.datepicker {
top: 92px;
right: 12px;
& .customBtn {
&:hover {
border-color: #FEDC00;
background-color: #FEDC00;
color: #000;
}
}
}
.cursor {
cursor: pointer;
}
.selectDate {
background-color: #000;
color: #fff;
border-radius: 50%;
}
\ 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