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
rich-maker
Commits
360b9ce8
Commit
360b9ce8
authored
Jul 14, 2021
by
Choi Ga Young
Browse files
캘린더 틀 완성
parent
717409d1
Changes
1
Show whitespace changes
Inline
Side-by-side
Calendar.js
View file @
360b9ce8
...
@@ -3,10 +3,12 @@ import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from
...
@@ -3,10 +3,12 @@ import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from
import
{
Button
}
from
'
react-native-elements
'
;
import
{
Button
}
from
'
react-native-elements
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
const
DateItem
=
({
dateitem
,
onPress
,
backgroundColor
,
textColor
})
=>
{
const
DateItem
=
({
dateitem
,
onPress
,
backgroundColor
,
textColor
,
flatListHeight
})
=>
{
return
(
return
(
<
TouchableOpacity
onPress
=
{
onPress
}
style
=
{[
style
.
dateContainer
,
backgroundColor
]}
>
<
TouchableOpacity
onPress
=
{
onPress
}
style
=
{[
style
.
dateContainer
,
backgroundColor
,
{
height
:
flatListHeight
}]}
>
<
Text
style
=
{
textColor
}
>
{
dateitem
}
<
/Text
>
<
Text
style
=
{
textColor
}
>
{
dateitem
}
<
/Text
>
<
Text
style
=
{{
color
:
'
blue
'
}}
>
100
,
000
<
/Text
>
<
/TouchableOpacity
>
<
/TouchableOpacity
>
);
);
};
};
...
@@ -17,6 +19,7 @@ function Calendar() {
...
@@ -17,6 +19,7 @@ function Calendar() {
const
[
month
,
setMonth
]
=
useState
(
date
.
getMonth
());
const
[
month
,
setMonth
]
=
useState
(
date
.
getMonth
());
const
todayM
=
date
.
getMonth
();
const
todayM
=
date
.
getMonth
();
const
todayY
=
date
.
getFullYear
();
const
todayY
=
date
.
getFullYear
();
const
[
flatListHeight
,
setFlatListHeight
]
=
useState
(
400
)
const
prevLast
=
new
Date
(
year
,
month
,
0
);
//이전 달의 마지막 날
const
prevLast
=
new
Date
(
year
,
month
,
0
);
//이전 달의 마지막 날
const
thisFirst
=
new
Date
(
year
,
month
,
1
);
//이번 달의 첫째 날
const
thisFirst
=
new
Date
(
year
,
month
,
1
);
//이번 달의 첫째 날
...
@@ -50,7 +53,7 @@ function Calendar() {
...
@@ -50,7 +53,7 @@ function Calendar() {
const
[
selectedKey
,
setSelectedKey
]
=
useState
(
null
);
const
[
selectedKey
,
setSelectedKey
]
=
useState
(
null
);
const
renderDate
=
({
item
})
=>
{
const
renderDate
=
({
item
})
=>
{
const
backgroundColor
=
item
.
key
===
selectedKey
?
'
#87ceeb
'
:
'
#
ffffff
'
;
const
backgroundColor
=
item
.
key
===
selectedKey
?
'
#87ceeb
'
:
'
#
FFFAFA
'
;
let
color
=
'
#000000
'
;
let
color
=
'
#000000
'
;
if
(
item
.
idates
===
date
.
getDate
()
&&
month
===
todayM
&&
year
===
todayY
)
{
if
(
item
.
idates
===
date
.
getDate
()
&&
month
===
todayM
&&
year
===
todayY
)
{
istoday
=
true
;
istoday
=
true
;
...
@@ -63,11 +66,12 @@ function Calendar() {
...
@@ -63,11 +66,12 @@ function Calendar() {
color
=
'
#a9a9a9
'
color
=
'
#a9a9a9
'
}
}
return
(
return
(
<
DateItem
dateitem
=
{
item
.
idates
}
onPress
=
{()
=>
setSelectedKey
(
item
.
key
)}
backgroundColor
=
{{
backgroundColor
}}
textColor
=
{{
color
}}
/
>
<
DateItem
dateitem
=
{
item
.
idates
}
onPress
=
{()
=>
setSelectedKey
(
item
.
key
)}
backgroundColor
=
{{
backgroundColor
}}
textColor
=
{{
color
}}
flatListHeight
=
{
flatListHeight
/
5
}
/
>
)
)
}
}
const
prevBtn
=
()
=>
{
const
prevBtn
=
()
=>
{
setSelectedKey
(
null
)
if
(
month
<
1
)
{
if
(
month
<
1
)
{
setYear
(
year
-
1
)
setYear
(
year
-
1
)
setMonth
(
11
)
setMonth
(
11
)
...
@@ -77,6 +81,7 @@ function Calendar() {
...
@@ -77,6 +81,7 @@ function Calendar() {
};
};
const
nextBtn
=
()
=>
{
const
nextBtn
=
()
=>
{
setSelectedKey
(
null
)
if
(
month
>
10
)
{
if
(
month
>
10
)
{
setYear
(
year
+
1
)
setYear
(
year
+
1
)
setMonth
(
0
)
setMonth
(
0
)
...
@@ -91,9 +96,13 @@ function Calendar() {
...
@@ -91,9 +96,13 @@ function Calendar() {
setSelectedKey
(
null
)
setSelectedKey
(
null
)
},
[])
},
[])
const
onLayout
=
(
event
)
=>
{
const
{
x
,
y
,
height
,
width
}
=
event
.
nativeEvent
.
layout
;
setFlatListHeight
(
height
)
}
return
(
return
(
<>
<>
<
SafeAreaView
>
<
SafeAreaView
style
=
{
style
.
EntContainer
}
>
<
View
style
=
{
style
.
Container
}
>
<
View
style
=
{
style
.
Container
}
>
<
Text
style
=
{
style
.
Head
}
>
{
year
}
년
{
month
+
1
}
월
<
/Text
>
<
Text
style
=
{
style
.
Head
}
>
{
year
}
년
{
month
+
1
}
월
<
/Text
>
<
View
style
=
{
style
.
Buttons
}
>
<
View
style
=
{
style
.
Buttons
}
>
...
@@ -106,34 +115,47 @@ function Calendar() {
...
@@ -106,34 +115,47 @@ function Calendar() {
}
type
=
'
clear
'
/>
}
type
=
'
clear
'
/>
<
/View
>
<
/View
>
<
/View
>
<
/View
>
<
FlatList
ListHeaderComponent
=
{
<
View
style
=
{
style
.
Days
}
>
<
View
style
=
{
style
.
Days
}
>
<
Text
>
월
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
월
<
/Text
>
<
Text
>
화
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
화
<
/Text
>
<
Text
>
수
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
수
<
/Text
>
<
Text
>
목
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
목
<
/Text
>
<
Text
>
금
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
금
<
/Text
>
<
Text
>
토
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
토
<
/Text
>
<
Text
>
일
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
일
<
/Text
>
<
/View
>
<
/View
>
}
data
=
{
dates
}
renderItem
=
{
renderDate
}
numColumns
=
{
7
}
extraData
=
{
selectedKey
}
/
>
<
FlatList
style
=
{
style
.
ListContainer
}
onLayout
=
{
onLayout
}
contentContainerStyle
=
{
style
.
wrapper
}
data
=
{
dates
}
numColumns
=
{
7
}
renderItem
=
{
renderDate
}
extraData
=
{
selectedKey
}
/
>
<
/SafeAreaView
>
<
/SafeAreaView
>
<
/
>
<
/
>
)
)
}
}
const
style
=
StyleSheet
.
create
({
const
style
=
StyleSheet
.
create
({
Head
:
{
wrapper
:
{
alignItems
:
'
stretch
'
,
alignContent
:
'
stretch
'
},
EntContainer
:
{
//전체 (SafeAreaView)
flex
:
1
,
padding
:
20
},
Head
:
{
//00년00월
fontSize
:
24
,
fontSize
:
24
,
},
},
Container
:
{
Container
:
{
//년월, 버튼 뷰에 적용
justifyContent
:
"
center
"
,
justifyContent
:
"
center
"
,
alignItems
:
"
center
"
,
alignItems
:
"
center
"
,
},
},
dateContainer
:
{
dateContainer
:
{
//각 date에 적용 (Text 태그), DateItem 컴포넌트에 적용
//height:300
,
flex
:
1
,
//backgroundColor: '#FFFFFF'
,
borderWidth
:
0.8
,
margin
:
10
borderColor
:
'
#DCDCDC
'
},
},
Buttons
:
{
Buttons
:
{
flexDirection
:
'
row
'
,
flexDirection
:
'
row
'
,
...
@@ -142,6 +164,10 @@ const style = StyleSheet.create({
...
@@ -142,6 +164,10 @@ const style = StyleSheet.create({
Days
:
{
Days
:
{
flexDirection
:
'
row
'
flexDirection
:
'
row
'
},
},
DayText
:
{
flex
:
1
,
textAlign
:
'
center
'
},
});
});
export
default
Calendar
;
export
default
Calendar
;
\ 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