import { useState, useEffect, useRef } from "react"; import { useHistory } from "react-router-dom"; import CalendarBtn from "../Buttons/CalendarBtn.js"; import DatePickerModal from "../Modal/DatePickerModal.js"; import moment from 'moment'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from "@fullcalendar/interaction"; import bootstrapPlugin from '@fullcalendar/bootstrap'; import '@fortawesome/fontawesome-free/css/all.css'; const Monthly = () => { const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD')) const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD')) const [show, setShow] = useState(false) const calenIconRef = useRef(null) const calendarRef = useRef(null) let calendar = null const history = useHistory(); useEffect(() => { if (calendarRef && calendarRef.current) { calendar = calendarRef.current.getApi() } }) useEffect(() => { if (calenIconRef && calenIconRef.current) { calenIconRef.current.addEventListener('click', () => { calendar.today() let date = moment(calendar.getDate()).format('YYYY-MM-DD') setChangeDate(date) }) } return () => { if (calenIconRef && calenIconRef.current) { calenIconRef.current.removeEventListener('click', () => { calendar.today() let date = moment(calendar.getDate()).format('YYYY-MM-DD') setChangeDate(date) }) } } }, [calenIconRef.current]) useEffect(() => { calendar.gotoDate(changeDate) }, [changeDate]) return ( <>
{ const weekList = ["일", "월", "화", "수", "목", "금", "토"] return weekList[date.dow] }} validRange={{ start: moment(initialDate).subtract(3, 'years').format('YYYY-MM[-01]'), end: moment(initialDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]') }} customButtons={{ myCustomButton: { text: moment(changeDate).format('YYYY.MM'), click: () => { setShow(true) return