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
8b050846
Commit
8b050846
authored
Oct 31, 2021
by
Kim, Subin
Browse files
Admin calendar 추가
parent
dbc0e71e
Changes
5
Hide whitespace changes
Inline
Side-by-side
client/src/components/AdminScheduleItem.js
View file @
8b050846
...
...
@@ -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
>
...
...
client/src/components/Calendar/AdminMonthly.js
0 → 100644
View file @
8b050846
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
client/src/components/Modal/ScheduleModal.js
View file @
8b050846
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
>
<
/
>
)
}
...
...
client/src/pages/Admin/AdminPage.js
View file @
8b050846
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
"
/>
<
/
>
)
}
...
...
client/src/pages/Admin/admin.module.scss
View file @
8b050846
...
...
@@ -9,4 +9,8 @@
color
:
crimson
;
}
}
}
.body
{
padding-top
:
4em
;
}
\ 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