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
a11b53c0
Commit
a11b53c0
authored
Aug 07, 2021
by
Kim, Subin
Browse files
Calender 컴포넌트 만드는 중...
parent
d0ba02b7
Changes
2
Show whitespace changes
Inline
Side-by-side
client/src/components/Calender/Calender.js
View file @
a11b53c0
...
@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
...
@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
dateArr
.
push
({
date
:
lastWeek
.
format
(
'
YYYY-MM-DD
'
),
day
:
lastWeek
.
format
(
'
d
'
)
})
dateArr
.
push
({
date
:
lastWeek
.
format
(
'
YYYY-MM-DD
'
),
day
:
lastWeek
.
format
(
'
d
'
)
})
lastWeek
.
add
(
1
,
'
days
'
)
lastWeek
.
add
(
1
,
'
days
'
)
}
}
console
.
log
(
"
arr=
"
,
dateArr
)
const
resultArr
=
dateArr
.
map
(
el
=>
<
div
className
=
"
col-2 align-self-end text-center
"
onClick
=
{()
=>
setSelectDate
(
el
.
date
)}
>
console
.
log
(
"
same==
"
,
moment
(
oneDay
).
isSame
(
'
2021-08-07
'
))
{
moment
(
el
.
date
).
isSame
(
oneDay
)
||
el
.
date
.
split
(
'
-
'
)[
2
]
===
"
01
"
?
<
strong
className
=
{
styles
.
yearmonth
}
>
{
moment
(
el
.
date
).
format
(
'
YYYY.MM
'
)}
<
/strong> : ""
}
const
resultArr
=
dateArr
.
map
(
el
=>
<
div
onClick
=
{()
=>
setSelectDate
(
el
.
date
)}
>
<
div
className
=
{
"
d-flex flex-column
"
+
((
Number
(
el
.
day
)
===
0
||
Number
(
el
.
day
)
===
6
)
?
((
Number
(
el
.
day
)
===
0
)
?
"
text-danger
"
:
"
text-primary
"
)
:
""
)}
>
{
moment
(
el
.
date
).
isSame
(
oneDay
)
||
el
.
date
.
split
(
'
-
'
)[
2
]
===
"
01
"
?
<
strong
>
{
moment
(
el
.
date
).
format
(
'
YYYY.MM
'
)}
<
/strong> : ""
}
<
strong
className
=
{
moment
(
el
.
date
).
isSame
(
oneDay
)
?
styles
.
selectDate
:
""
}
>
{
moment
(
el
.
date
).
format
(
'
DD
'
)}
<
/strong
>
<
div
>
<
strong
>
{
moment
(
el
.
date
).
isSame
(
oneDay
)
?
"
오늘
"
:
week
[
el
.
day
]}
<
/strong
>
<
strong
>
{
moment
(
el
.
date
).
format
(
'
DD
'
)}
<
/strong
>
<
em
>
{
moment
(
el
.
date
).
isSame
(
oneDay
)
?
"
오늘
"
:
week
[
el
.
day
]}
<
/em
>
<
/div
>
<
/div
>
<
/div>
)
<
/div>
)
setDateList
(
resultArr
)
setDateList
(
resultArr
)
...
@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
...
@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
return
(
return
(
<>
<>
{
console
.
log
(
"
date==
"
,
selectDate
)}
{
console
.
log
(
"
date==
"
,
selectDate
)}
<
div
>
<
div
className
=
"
d-flex position-relative border-bottom border-dark border-2 p-3
"
>
<
i
className
=
"
bi bi-chevron-left
"
><
/i
>
<
i
className
=
{
`bi bi-calendar2 position-absolute top-0
${
styles
.
calender
}
`
}
><
/i
>
{
dateList
.
map
(
el
=>
el
)}
<
i
className
=
"
col-1 bi bi-chevron-left align-self-center text-center
"
><
/i
>
<
i
className
=
"
bi bi-chevron-right
"
><
/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
>
<
/div
>
<
/div
>
<
/
>
<
/
>
)
)
...
...
client/src/components/Calender/calender.module.scss
View file @
a11b53c0
.box
{
overflow
:
hidden
;
&
.yearmonth
{
position
:
relative
;
top
:
0
;
width
:
100%
;
font-size
:
10px
;
}
&
.selectDate
{
background-color
:
#000
;
color
:
#fff
;
border-radius
:
50%
;
}
}
.calender
{
right
:
13px
;
font-size
:
1
.5em
;
}
\ 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