HorizontalCalender.js 7.31 KB
Newer Older
1
import { useState, useEffect } from "react";
Kim, Subin's avatar
Kim, Subin committed
2
import { useHistory } from "react-router-dom";
3
import moment from "moment";
Kim, Subin's avatar
Kim, Subin committed
4
import DatePicker from "./DatePicker.js";
5
6
7
8
import styles from "./calender.module.scss";

const Calender = ({ selectDate, setSelectDate }) => {
    const [dateList, setDateList] = useState([])
Kim, Subin's avatar
Kim, Subin committed
9
    const [dateArr, setDateArr] = useState([])
Kim, Subin's avatar
Kim, Subin committed
10
    const [date, setDate] = useState(moment().format('YYYY-MM-DD'))
Kim, Subin's avatar
Kim, Subin committed
11
    const [weekly, setWeekly] = useState([])
12
    const [week, setWeek] = useState(["", "", "", "", "", "", ""])
Kim, Subin's avatar
Kim, Subin committed
13
    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') })
Kim, Subin's avatar
Kim, Subin committed
14
    const history = useHistory()
15
16

    useEffect(() => {
Kim, Subin's avatar
Kim, Subin committed
17
        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') })
18
        getDate(selectDate)
Kim, Subin's avatar
Kim, Subin committed
19
        getWeek(selectDate)
Kim, Subin's avatar
Kim, Subin committed
20
    }, [selectDate])
21

Kim, Subin's avatar
Kim, Subin committed
22
23
24
25
    function getWeek(oneDay) {
        let dateArr = []
        dateArr = Array(7).fill(0).map((n, i) => {
            let current = moment(oneDay).add((n + i), 'days')
Kim, Subin's avatar
Kim, Subin committed
26
            return <div className="col-auto align-self-end text-center" onClick={() => setSelectDate(current.format('YYYY-MM-DD'))}>
Kim, Subin's avatar
Kim, Subin committed
27
28
                {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") : "")}>
Kim, Subin's avatar
Kim, Subin committed
29
                    <strong className={current.isSame(oneDay) ? (/admin/g.test(history.location.pathname) ? styles.selectDate : styles.selectatHome) : ""}>{current.format('DD')}</strong>
30
                    <strong>{current.isSame(moment().format('YYYY-MM-DD')) ? "오늘" : week[Number(current.format("d"))]}</strong>
Kim, Subin's avatar
Kim, Subin committed
31
32
33
34
35
36
37
                </div>
            </div>
        })
        console.log("Dadsa--===", dateArr)
        setWeekly(dateArr)
    }

38
39
40
41
42
43
44
45
    function getDate(oneDay) {
        let dateArr = []
        let lastWeek = moment(oneDay).subtract(7, 'days')
        const nextWeek = moment(oneDay).add(7, 'days')
        while (lastWeek.isBefore(nextWeek)) {
            dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
            lastWeek.add(1, 'days')
        }
46
47
        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> : ""}
Kim, Subin's avatar
Kim, Subin committed
48
            <div className={`d-flex flex-column ${styles.cursor} ` + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
Kim, Subin's avatar
Kim, Subin committed
49
                <strong className={moment(el.date).isSame(oneDay) ? (/admin/g.test(history.location.pathname) ? styles.selectDate : styles.selectatHome) : ""}>{moment(el.date).format('DD')}</strong>
50
                <strong>{moment(el.date).isSame(moment().format('YYYY-MM-DD')) ? "오늘" : week[el.day]}</strong>
51
52
53
54
55
            </div>
        </div>)
        setDateList(resultArr)
    }

Kim, Subin's avatar
Kim, Subin committed
56
    function preWeek() {
Kim, Subin's avatar
Kim, Subin committed
57
58
        const preDate = moment(date).week()
        console.log("week==",preDate)
Kim, Subin's avatar
Kim, Subin committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
        // 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() {

    }

78
    return (
Kim, Subin's avatar
Kim, Subin committed
79
        <>
80
            {console.log("date==", selectDate)}
81
            <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
Kim, Subin's avatar
Kim, Subin committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
                <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>
Kim, Subin's avatar
Kim, Subin committed
107
                <i className={`col-1 bi bi-chevron-left align-self-center text-center ${styles.cursor}`} onClick={preWeek}></i>
Kim, Subin's avatar
Kim, Subin committed
108
                <div className={`d-flex justify-content-between col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
Kim, Subin's avatar
Kim, Subin committed
109
                <i className={`col-1 bi bi-chevron-right align-self-center text-center ${styles.cursor}`} onClick={nextWeek}></i>
110
111
112
113
114
115
            </div>
        </>
    )
}

export default Calender