Calendar Monthly&Date view 완성

client/src/components/Calendar/CustomView.js

+import KUSchedule from "../Schedule/KUSchedule.js";
+import ScheduleList from "../Schedule/ScheduleList.js";
+import { createPlugin } from '@fullcalendar/react';
+
+const CustomView = () => {
+    return (
+        <div className='fc-custom-view border-top border-dark pt-2'>
+            <KUSchedule />
+            <ScheduleList />
+        </div>
+    )
+}
+
+export default createPlugin({
+    views: {
+        custom: CustomView
+    }
+})
\ No newline at end of file

client/src/components/Calendar/DateView.js

+import { useEffect, useRef } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import moment from 'moment';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import bootstrapPlugin from '@fullcalendar/bootstrap';
+import '@fortawesome/fontawesome-free/css/all.css';
+import customViewPlugin from "./CustomView.js";
+
+const DateView = ({ }) => {
+    const calendarRef = useRef(null)
+    const { date } = useParams()
+    const history = useHistory()
+    let calendar = null
+
+    useEffect(() => {
+        if (calendarRef && calendarRef.current) {
+            calendar = calendarRef.current.getApi()
+        }
+    })
+
+    return (
+        <FullCalendar
+            ref={calendarRef}
+            plugins={[bootstrapPlugin, customViewPlugin]}
+            initialView="custom"
+            headerToolbar={{
+                start: 'prev',
+                center: 'myCustomButton',
+                end: 'next'
+            }}
+            customButtons={{
+                myCustomButton: {
+                    text: moment(date).format("MM.DD"),
+                    click: () => history.push("/home")
+                },
+                prev: {
+                    icon: "fa-chevron-left",
+                    click: () => {
+                        calendar.prev()
+                        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                        history.push(`/schedule/${date}`)
+                    }
+                },
+                next: {
+                    icon: "fa-chevron-right",
+                    click: () => {
+                        calendar.next()
+                        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                        history.push(`/schedule/${date}`)
+                    }
+                }
+            }}
+            timeZone="local"
+            themeSystem='bootstrap'
+        />
+    )
+}
+
+export default DateView
\ No newline at end of file

client/src/components/Calendar/Monthly.js

@@ -13,8 +13,8 @@ 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)
+    const calenIconRef = useRef(null)
     let calendar = null
     const history = useHistory();
 
@@ -99,7 +99,7 @@ const Monthly = () => {
                 timeZone="local"
                 themeSystem='bootstrap'
                 // eventLimit="true"
-                height='75vh'
+                height='78vh'
             />
             <DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} show={show} setShow={setShow} />
         </>

client/src/scss/custom.scss

@@ -71,7 +71,7 @@ button {
 }
 
 .fc {
-    margin-top: 1em;
+    padding-top: 1em;
     
     & a {
         text-decoration: none;
@@ -135,4 +135,8 @@ button {
     & td.fc-day-sun:not(.fc-day-other) {
         color: #FF0000;
     }
+
+    & .fc-dayGridDay-view {
+        display: none;
+    }
 }
\ No newline at end of file