Commit 8b050846 authored by Kim, Subin's avatar Kim, Subin
Browse files

Admin calendar 추가

parent dbc0e71e
......@@ -9,7 +9,7 @@ const AdminScheduleItem = ({}) => {
<div className="d-flex justify-content-between">
<h3>sadsad</h3>
<div className="fs-5">
<Link to="/admin/edit"><i className="bi bi-pencil-square text-dark me-1" data-bs-dismiss="modal"></i></Link>
<Link to="/admin/edit"><i className="bi bi-pencil-square text-dark me-2" data-bs-dismiss="modal"></i></Link>
<i className="bi bi-trash"></i>
</div>
</div>
......
import { useState, useEffect, useRef } from "react";
import CalendarBtn from "../Buttons/CalendarBtn.js";
import DatePickerModal from "../Modal/DatePickerModal.js";
import ScheduleModal from "../Modal/ScheduleModal.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 AdminMonthly = () => {
const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD'))
const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD'))
const [pickerShow, setPickerShow] = useState(false)
const [dateShow, setDateShow] = useState({date: moment().format('YYYY-MM-DD'), show: false})
const calendarRef = useRef(null)
const calenIconRef = useRef(null)
let calendar = null
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 (
<>
<div ref={calenIconRef} className="position-absolute" style={{ top: "7px", left: "7px" }}>
<CalendarBtn date={moment(initialDate).format('DD')} />
</div>
<FullCalendar
ref={calendarRef}
plugins={[dayGridPlugin, interactionPlugin, bootstrapPlugin]}
initialView="dayGridMonth"
initialDate={initialDate}
headerToolbar={{
start: 'prev',
center: 'myCustomButton',
end: 'next'
}}
dayHeaderContent={(date) => {
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: () => {
setPickerShow(true)
return <button className="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#datePicker" aria-controls="datePicker" />
}
},
prev: {
icon: "fa-chevron-left",
click: () => {
calendar.prev()
let date = moment(calendar.getDate()).format('YYYY-MM-DD')
setChangeDate(date)
}
},
next: {
icon: "fa-chevron-right",
click: () => {
calendar.next()
let date = moment(calendar.getDate()).format('YYYY-MM-DD')
setChangeDate(date)
}
}
}}
dateClick={({ dateStr }) => {
console.log("dateStr==", dateStr)
setDateShow({ ...dateShow, date: dateStr, show: true })
return <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"></button>
}}
timeZone="local"
themeSystem='bootstrap'
height='78vh'
/>
<DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} pickerShow={pickerShow} setPickerShow={setPickerShow} />
<ScheduleModal dateShow={dateShow} setDateShow={setDateShow} />
</>
)
}
export default AdminMonthly
\ No newline at end of file
import Item from "../AdminScheduleItem.js";
import moment from 'moment';
import styles from "./modal.module.scss";
const ScheduleModal = () => {
const ScheduleModal = ({ dateShow, setDateShow }) => {
return (
<div className="modal" id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className={`modal-header ${styles.header}`}>
<h5 className="modal-title mx-auto" id="scheduleModalLabel">Modal title</h5>
<button type="button" className={`btn-close btn-close-white ms-0 ${styles.closeBtn}`} data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className={`modal-body text-dark ${styles.body}`}>
<Item />
<p className="mb-0">선택한 날짜에 일정이 없습니다.</p>
<>
{dateShow.show ? <div className="modal-backdrop fade show"></div> : null}
<div className={"modal " + (dateShow.show ? "d-block" : "d-none")} id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className={`modal-header ${styles.header}`}>
<h5 className="modal-title text-white mx-auto" id="scheduleModalLabel">{moment(dateShow.date).format("MM.DD")}</h5>
<button type="button" className={`btn-close btn-close-white ms-0 ${styles.closeBtn}`} data-bs-dismiss="modal" aria-label="Close" onClick={() => setDateShow({ ...dateShow, show: false })}></button>
</div>
<div className={`modal-body text-dark ${styles.body}`}>
<Item />
<p className="text-center mb-0">선택한 날짜에 일정이 없습니다.</p>
</div>
</div>
</div>
</div>
</div>
</>
)
}
......
import CalendarBtn from "../../components/Buttons/CalendarBtn.js";
import Monthly from "../../components/Calendar/AdminMonthly.js";
import Footer from "../../components/Footer.js";
import styles from "./admin.module.scss";
const AdminPage = () => {
return (
<>
<p className={`position-absolute user-select-none ${styles.status}`}>관리자님, 환영합니다. | <span className={styles.cursor}>로그아웃</span></p>
<div className="position-absolute" style={{ top: "7px", left: "7px" }}>
<CalendarBtn date="2021-09-28" />
<div className={styles.body}>
<Monthly />
</div>
<Footer pathname="admin/edit" />
</>
)
}
......
......@@ -9,4 +9,8 @@
color: crimson;
}
}
}
.body {
padding-top: 4em;
}
\ 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