Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
students
Today KU
Commits
13ecba13
Commit
13ecba13
authored
Nov 01, 2021
by
Kim, Subin
Browse files
Weekly 완성
parent
fba4ebde
Changes
5
Hide whitespace changes
Inline
Side-by-side
client/src/components/Calendar/CustomView.js
View file @
13ecba13
...
@@ -2,7 +2,7 @@ import KUSchedule from "../Schedule/KUSchedule.js";
...
@@ -2,7 +2,7 @@ import KUSchedule from "../Schedule/KUSchedule.js";
import
ScheduleList
from
"
../Schedule/ScheduleList.js
"
;
import
ScheduleList
from
"
../Schedule/ScheduleList.js
"
;
import
{
createPlugin
}
from
'
@fullcalendar/react
'
;
import
{
createPlugin
}
from
'
@fullcalendar/react
'
;
const
CustomView
=
()
=>
{
const
Custom
Date
View
=
()
=>
{
return
(
return
(
<
div
className
=
'
fc-custom-view border-top border-dark pt-2
'
>
<
div
className
=
'
fc-custom-view border-top border-dark pt-2
'
>
<
KUSchedule
/>
<
KUSchedule
/>
...
@@ -13,6 +13,6 @@ const CustomView = () => {
...
@@ -13,6 +13,6 @@ const CustomView = () => {
export
default
createPlugin
({
export
default
createPlugin
({
views
:
{
views
:
{
custom
:
CustomView
date
:
Custom
Date
View
}
}
})
})
\ No newline at end of file
client/src/components/Calendar/DateSet.js
0 → 100644
View file @
13ecba13
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
View file @
13ecba13
...
@@ -2,10 +2,9 @@ import { useEffect, useRef } from "react";
...
@@ -2,10 +2,9 @@ import { useEffect, useRef } from "react";
import
{
useHistory
,
useParams
}
from
"
react-router-dom
"
;
import
{
useHistory
,
useParams
}
from
"
react-router-dom
"
;
import
moment
from
'
moment
'
;
import
moment
from
'
moment
'
;
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
dayGrid
Plugin
from
'
@fullcalendar/daygrid
'
;
import
customView
Plugin
from
"
./CustomView.js
"
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
'
@fortawesome/fontawesome-free/css/all.css
'
;
import
'
@fortawesome/fontawesome-free/css/all.css
'
;
import
customViewPlugin
from
"
./CustomView.js
"
;
const
DateView
=
({
})
=>
{
const
DateView
=
({
})
=>
{
const
calendarRef
=
useRef
(
null
)
const
calendarRef
=
useRef
(
null
)
...
@@ -23,7 +22,8 @@ const DateView = ({ }) => {
...
@@ -23,7 +22,8 @@ const DateView = ({ }) => {
<
FullCalendar
<
FullCalendar
ref
=
{
calendarRef
}
ref
=
{
calendarRef
}
plugins
=
{[
bootstrapPlugin
,
customViewPlugin
]}
plugins
=
{[
bootstrapPlugin
,
customViewPlugin
]}
initialView
=
"
custom
"
initialView
=
"
date
"
initialDate
=
{
date
}
headerToolbar
=
{{
headerToolbar
=
{{
start
:
'
prev
'
,
start
:
'
prev
'
,
center
:
'
myCustomButton
'
,
center
:
'
myCustomButton
'
,
...
...
client/src/components/Calendar/Weekly.js
View file @
13ecba13
import
{
useState
,
useEffect
,
useRef
}
from
"
react
"
;
import
{
useHistory
,
useParams
}
from
"
react-router-dom
"
;
import
Date
from
"
./DateSet.js
"
;
import
moment
from
'
moment
'
;
import
moment
from
'
moment
'
;
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
FullCalendar
,
{
createPlugin
}
from
'
@fullcalendar/react
'
;
import
dayGridPlugin
from
'
@fullcalendar/daygrid
'
;
import
interactionPlugin
from
"
@fullcalendar/interaction
"
;
import
interactionPlugin
from
"
@fullcalendar/interaction
"
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
'
@fortawesome/fontawesome-free/css/all.css
'
;
const
Weekly
=
()
=>
{
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
(
return
(
<
FullCalendar
<
FullCalendar
plugins
=
{[
dayGridPlugin
,
interactionPlugin
,
bootstrapPlugin
]}
ref
=
{
calendarRef
}
initialView
=
"
dayGridWeek
"
plugins
=
{[
customViewPlugin
,
interactionPlugin
,
bootstrapPlugin
]}
initialView
=
"
week
"
initialDate
=
{
chooseDate
}
headerToolbar
=
{{
headerToolbar
=
{{
start
:
'
title
'
,
start
:
'
title
'
,
center
:
''
,
center
:
''
,
end
:
''
end
:
''
}}
}}
titleFormat
=
{(
date
)
=>
{
titleFormat
=
{()
=>
moment
(
chooseDate
).
format
(
"
YYYY[년 ]MM[월]
"
)}
// if (date.date.)
views
=
{{
console
.
log
(
"
date==
"
,
date
)
week
:
{
return
date
.
date
.
year
+
"
년
"
+
(
date
.
date
.
month
+
1
)
+
"
월
"
;
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
0 → 100644
View file @
13ecba13
.today
{
background-color
:
crimson
;
color
:
#fff
;
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment