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
butter-studio
Commits
d7a53a5a
Commit
d7a53a5a
authored
Aug 09, 2021
by
Kim, Subin
Browse files
Calender 수정 중
parent
79b0adad
Changes
3
Hide whitespace changes
Inline
Side-by-side
client/src/components/Calender/DatePicker.js
0 → 100644
View file @
d7a53a5a
import
{
useState
,
useEffect
}
from
"
react
"
;
import
moment
from
"
moment
"
;
import
styles
from
"
./calender.module.scss
"
;
const
DatePicker
=
({
selectDate
,
setSelectDate
,
month
})
=>
{
const
[
week
,
setWeek
]
=
useState
([])
useEffect
(()
=>
{
generate
()
},
[
month
])
function
generate
()
{
const
weekly
=
[]
const
startWeek
=
moment
(
month
.
cur
).
startOf
(
'
month
'
).
week
()
const
endWeek
=
moment
(
month
.
cur
).
endOf
(
'
month
'
).
week
()
===
1
?
53
:
moment
(
month
.
cur
).
endOf
(
'
month
'
).
week
()
for
(
let
week
=
startWeek
;
week
<=
endWeek
;
week
++
)
{
weekly
.
push
(
<
tr
key
=
{
week
}
>
{
Array
(
7
).
fill
(
0
).
map
((
n
,
i
)
=>
{
let
current
=
moment
(
month
.
cur
).
clone
().
week
(
week
).
startOf
(
'
week
'
).
add
(
n
+
i
,
'
day
'
)
let
isSelected
=
moment
(
selectDate
).
format
(
'
YYYYMMDD
'
)
===
current
.
format
(
'
YYYYMMDD
'
)
?
`
${
styles
.
selectDate
}
`
:
''
let
isColor
=
current
.
format
(
'
MM
'
)
!==
moment
(
month
.
cur
).
format
(
'
MM
'
)
?
'
text-secondary
'
:
((
i
===
0
)
?
"
text-danger
"
:
(
i
===
6
)
?
"
text-primary
"
:
""
)
return
<
td
className
=
{
`text-center p-1
${
styles
.
cursor
}
`
}
key
=
{
i
}
data
-
bs
-
dismiss
=
"
modal
"
onClick
=
{()
=>
setSelectDate
(
current
.
format
(
'
YYYY-MM-DD
'
))}
>
<
span
className
=
{
`d-block
${
isColor
}
${
isSelected
}
`
}
>
{
current
.
format
(
'
D
'
)}
<
/span
>
<
/td
>
})}
<
/tr>
)
}
setWeek
(
weekly
)
}
return
(
<
tbody
>
{
week
.
length
!==
0
?
week
.
map
(
row
=>
row
)
:
''
}
<
/tbody
>
)
}
export
default
DatePicker
\ No newline at end of file
client/src/components/Calender/HorizontalCalender.js
View file @
d7a53a5a
import
{
useState
,
useEffect
}
from
"
react
"
;
import
moment
from
"
moment
"
;
import
DatePicker
from
"
./DatePicker.js
"
;
import
styles
from
"
./calender.module.scss
"
;
const
Calender
=
({
selectDate
,
setSelectDate
})
=>
{
const
[
dateList
,
setDateList
]
=
useState
([])
const
[
week
,
setWeek
]
=
useState
([
"
일
"
,
"
월
"
,
"
화
"
,
"
수
"
,
"
목
"
,
"
금
"
,
"
토
"
])
const
[
month
,
setMonth
]
=
useState
({
pre
:
moment
(
selectDate
).
subtract
(
1
,
'
months
'
).
format
(
'
YYYY-MM
'
),
cur
:
moment
(
selectDate
).
format
(
'
YYYY-MM
'
),
next
:
moment
(
selectDate
).
add
(
1
,
'
months
'
).
format
(
'
YYYY-MM
'
)
})
useEffect
(()
=>
{
setMonth
({
...
month
,
pre
:
moment
(
selectDate
).
subtract
(
1
,
'
months
'
).
format
(
'
YYYY-MM
'
),
cur
:
moment
(
selectDate
).
format
(
'
YYYY-MM
'
),
next
:
moment
(
selectDate
).
add
(
1
,
'
months
'
).
format
(
'
YYYY-MM
'
)
})
getDate
(
selectDate
)
},
[])
},
[
selectDate
])
function
getDate
(
oneDay
)
{
let
dateArr
=
[]
...
...
@@ -20,7 +23,7 @@ const Calender = ({ selectDate, setSelectDate }) => {
}
const
resultArr
=
dateArr
.
map
(
el
=>
<
div
className
=
"
col-2 align-self-end text-center
"
onClick
=
{()
=>
setSelectDate
(
el
.
date
)}
>
{
moment
(
el
.
date
).
isSame
(
oneDay
)
||
el
.
date
.
split
(
'
-
'
)[
2
]
===
"
01
"
?
<
strong
className
=
{
styles
.
yearmonth
}
>
{
moment
(
el
.
date
).
format
(
'
YYYY.MM
'
)}
<
/strong> : ""
}
<
div
className
=
{
"
d-flex flex-column
"
+
((
Number
(
el
.
day
)
===
0
||
Number
(
el
.
day
)
===
6
)
?
((
Number
(
el
.
day
)
===
0
)
?
"
text-danger
"
:
"
text-primary
"
)
:
""
)}
>
<
div
className
=
{
`
d-flex flex-column
${
styles
.
cursor
}
`
+
((
Number
(
el
.
day
)
===
0
||
Number
(
el
.
day
)
===
6
)
?
((
Number
(
el
.
day
)
===
0
)
?
"
text-danger
"
:
"
text-primary
"
)
:
""
)}
>
<
strong
className
=
{
moment
(
el
.
date
).
isSame
(
oneDay
)
?
styles
.
selectDate
:
""
}
>
{
moment
(
el
.
date
).
format
(
'
DD
'
)}
<
/strong
>
<
strong
>
{
moment
(
el
.
date
).
isSame
(
oneDay
)
?
"
오늘
"
:
week
[
el
.
day
]}
<
/strong
>
<
/div
>
...
...
@@ -29,13 +32,37 @@ const Calender = ({ selectDate, setSelectDate }) => {
}
return
(
<>
<>
{
console
.
log
(
"
date==
"
,
selectDate
)}
<
div
className
=
"
d-flex position-relative border-bottom border-dark border-2 p-3
"
>
<
i
className
=
{
`bi bi-calendar2 position-absolute top-0
${
styles
.
calender
}
`
}
><
/i
>
<
i
className
=
"
col-1 bi bi-chevron-left align-self-center text-center
"
><
/i
>
<
i
className
=
{
`bi bi-calendar2 position-absolute top-0
${
styles
.
calender
}
${
styles
.
cursor
}
`
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#calenderModal
"
><
/i
>
<
div
className
=
"
modal
"
id
=
"
calenderModal
"
tabindex
=
"
-1
"
aria
-
labelledby
=
"
calenderModal
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
{
`modal-dialog position-absolute bg-white
${
styles
.
datepicker
}
`
}
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-body px-1 pt-1 pb-0
"
>
<
div
className
=
"
d-flex justify-content-between bg-dark rounded py-1
"
>
<
i
className
=
{
`bi bi-chevron-left align-self-center text-center text-white
${
styles
.
cursor
}
`
}
onClick
=
{()
=>
setMonth
({
...
month
,
pre
:
moment
(
month
.
pre
).
subtract
(
1
,
'
months
'
).
format
(
'
YYYY-MM
'
),
cur
:
month
.
pre
,
next
:
month
.
cur
})}
><
/i
>
<
div
className
=
"
text-white
"
>
{
moment
(
month
.
cur
).
format
(
'
YYYY년 MM월
'
)}
<
/div
>
<
i
className
=
{
`bi bi-chevron-right align-self-center text-center text-white
${
styles
.
cursor
}
`
}
onClick
=
{()
=>
setMonth
({
...
month
,
pre
:
month
.
cur
,
cur
:
month
.
next
,
next
:
moment
(
month
.
next
).
add
(
1
,
'
months
'
).
format
(
'
YYYY-MM
'
)
})}
><
/i
>
<
/div
>
<
table
className
=
"
table mb-0
"
>
<
thead
>
<
tr
>
{
week
.
map
(
day
=>
<
th
>
{
day
}
<
/th>
)
}</
tr
>
<
/thead
>
<
DatePicker
selectDate
=
{
selectDate
}
setSelectDate
=
{
setSelectDate
}
month
=
{
month
}
/
>
<
tfoot
>
<
tr
>
<
td
colSpan
=
"
7
"
align
=
"
center
"
><
button
type
=
"
button
"
className
=
{
`btn btn-dark btn-sm shadow-none
${
styles
.
customBtn
}
`
}
data
-
bs
-
dismiss
=
"
modal
"
onClick
=
{()
=>
setSelectDate
(
moment
().
format
(
'
YYYY-MM-DD
'
))}
>
오늘
<
/button></
td
>
<
/tr
>
<
/tfoot
>
<
/table
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
i
className
=
{
`col-1 bi bi-chevron-left align-self-center text-center
${
styles
.
cursor
}
`
}
><
/i
>
<
div
className
=
{
`d-flex col-10
${
styles
.
box
}
`
}
>
{
dateList
.
map
(
el
=>
el
)}
<
/div
>
<
i
className
=
"
col-1 bi bi-chevron-right align-self-center text-center
"
><
/i
>
<
i
className
=
{
`
col-1 bi bi-chevron-right align-self-center text-center
${
styles
.
cursor
}
`
}
><
/i
>
<
/div
>
<
/
>
)
...
...
client/src/components/Calender/calender.module.scss
View file @
d7a53a5a
...
...
@@ -7,15 +7,32 @@
width
:
100%
;
font-size
:
10px
;
}
&
.selectDate
{
background-color
:
#000
;
color
:
#fff
;
border-radius
:
50%
;
}
}
.calender
{
right
:
13px
;
font-size
:
1
.5em
;
}
.datepicker
{
top
:
92px
;
right
:
12px
;
&
.customBtn
{
&
:hover
{
border-color
:
#FEDC00
;
background-color
:
#FEDC00
;
color
:
#000
;
}
}
}
.cursor
{
cursor
:
pointer
;
}
.selectDate
{
background-color
:
#000
;
color
:
#fff
;
border-radius
:
50%
;
}
\ 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