Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
Today KU
Commits
9f58d899
Commit
9f58d899
authored
Oct 31, 2021
by
Kim, Subin
Browse files
Calendar Monthly&Date view 완성
parent
05c251b0
Changes
4
Hide whitespace changes
Inline
Side-by-side
client/src/components/Calendar/CustomView.js
0 → 100644
View file @
9f58d899
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
0 → 100644
View file @
9f58d899
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
View file @
9f58d899
...
...
@@ -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
=
'
7
5
vh
'
height
=
'
7
8
vh
'
/>
<
DatePickerModal
initialDate
=
{
initialDate
}
changeDate
=
{
changeDate
}
setChangeDate
=
{
setChangeDate
}
show
=
{
show
}
setShow
=
{
setShow
}
/
>
<
/
>
...
...
client/src/scss/custom.scss
View file @
9f58d899
...
...
@@ -71,7 +71,7 @@ button {
}
.fc
{
marg
in-top
:
1em
;
padd
in
g
-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
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