Weekly 완성

client/src/components/Calendar/CustomView.js

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

client/src/components/Calendar/DateSet.js

+import moment from 'moment';
+import styles from "./calendar.module.scss";
+
+const DateSet = ({ index, info, today, handleClick }) => {
+    const week = ['일', '월', '화', '수', '목', '금', '토']
+
+    return (
+        <div className="col d-flex flex-column text-center" onClick={() => handleClick(info.date)}>
+            <span className="text-center">{week[index]}</span>
+            <span className={today ? `rounded-circle ${styles.today}` : ""}>{moment(info.date).format("DD")}</span>
+            <span className="text-secondary">{info.rate ? info.rate + "%" : null}</span>
+        </div>
+    )
+}
+
+export default DateSet
\ No newline at end of file

client/src/components/Calendar/DateView.js

@@ -2,10 +2,9 @@ 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 customViewPlugin from "./CustomView.js";
 import bootstrapPlugin from '@fullcalendar/bootstrap';
 import '@fortawesome/fontawesome-free/css/all.css';
-import customViewPlugin from "./CustomView.js";
 
 const DateView = ({ }) => {
     const calendarRef = useRef(null)
@@ -23,7 +22,8 @@ const DateView = ({ }) => {
         <FullCalendar
             ref={calendarRef}
             plugins={[bootstrapPlugin, customViewPlugin]}
-            initialView="custom"
+            initialView="date"
+            initialDate={date}
             headerToolbar={{
                 start: 'prev',
                 center: 'myCustomButton',

client/src/components/Calendar/Weekly.js

+import { useState, useEffect, useRef } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import Date from "./DateSet.js";
 import moment from 'moment';
-import FullCalendar from '@fullcalendar/react';
-import dayGridPlugin from '@fullcalendar/daygrid';
+import FullCalendar, { createPlugin } from '@fullcalendar/react';
 import interactionPlugin from "@fullcalendar/interaction";
 import bootstrapPlugin from '@fullcalendar/bootstrap';
-import '@fortawesome/fontawesome-free/css/all.css';
 
 const Weekly = () => {
+    const history = useHistory()
+    const { date } = useParams()
+    const [chooseDate, setChooseDate] = useState(moment(date).format("YYYY-MM-DD"))
+    const [week, setWeek] = useState([
+        { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "75" },
+        { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "85" },
+        { date: moment(date).day(2).format("YYYY-MM-DD"), rate: "40" },
+        { date: moment(date).day(3).format("YYYY-MM-DD"), rate: "100" },
+        { date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" },
+        { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" },
+        { date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
+    ])
+    const calendarRef = useRef(null)
+    let calendar = null
+
+    useEffect(() => {
+        if (calendarRef && calendarRef.current) {
+            calendar = calendarRef.current.getApi()
+        }
+    })
+
+    useEffect(() => {
+        setChooseDate(moment(date).format("YYYY-MM-DD"))
+        setWeek([
+            { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "7" },
+            { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "8" },
+            { date: moment(date).day(2).format("YYYY-MM-DD"), rate: "4" },
+            { date: moment(date).day(3).format("YYYY-MM-DD"), rate: "100" },
+            { date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" },
+            { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" },
+            { date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
+        ])
+    }, [date])
+
+    function prev() {
+        calendar.prev()
+        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+        history.push(`/todo/${date}`)
+    }
+
+    function next() {
+        calendar.next()
+        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+        history.push(`/todo/${date}`)
+    }
+
+    function gotoDate(date) {
+        calendar.gotoDate(date)
+        history.push(`/todo/${date}`)
+    }
+
+    const CustomeWeeklyView = ({ dateProfile }) => {
+        let current = moment(dateProfile.currentRange.start).format("YYYY-MM-DD")
+        
+        return (
+            <div className="fc-custom-view weekly-view d-flex row-cols-9">
+                <i className="col bi bi-chevron-left align-self-center" onClick={prev} style={{ fontSize: "2em" }} />
+                {week.map((info, idx) => <Date index={idx} info={info} today={moment(info.date).isSame(current) ? true : false} handleClick={gotoDate} />)}
+                <i className="col bi bi-chevron-right align-self-center" onClick={next} style={{ fontSize: "2em" }} />
+            </div>
+        )
+    }
+
+    const customViewPlugin = createPlugin({
+        views: {
+            week: CustomeWeeklyView
+        }
+    })
+
     return (
         <FullCalendar
-            plugins={[dayGridPlugin, interactionPlugin, bootstrapPlugin]}
-            initialView="dayGridWeek"
+            ref={calendarRef}
+            plugins={[customViewPlugin, interactionPlugin, bootstrapPlugin]}
+            initialView="week"
+            initialDate={chooseDate}
             headerToolbar={{
                 start: 'title',
                 center: '',
                 end: ''
             }}
-            titleFormat={(date) => {
-                // if (date.date.)
-                console.log("date==",date)
-                return date.date.year + "년 " + (date.date.month + 1) + "월";
+            titleFormat={() => moment(chooseDate).format("YYYY[년 ]MM[월]")}
+            views={{
+                week: {
+                    validRange: {
+                        start: moment(chooseDate).subtract(3, 'years').format('YYYY-MM[-01]'),
+                        end: moment(chooseDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]')
+                    },
+                    dateIncrement: {
+                        days: 7
+                    }
+                }
             }}
+            timeZone="local"
+            themeSystem='bootstrap'
+            height="fit-content"
         />
     )
 }

client/src/components/Calendar/calendar.module.scss

+.today {
+    background-color: crimson;
+    color: #fff;
+}
\ No newline at end of file