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
ab8220c3
Commit
ab8220c3
authored
Jul 19, 2021
by
Choi Ga Young
Browse files
캘린더 배열 수정 중
parent
360b9ce8
Changes
1
Hide whitespace changes
Inline
Side-by-side
Calendar.js
View file @
ab8220c3
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
SafeAreaView
,
StyleSheet
,
View
,
Text
,
FlatList
,
TouchableOpacity
}
from
'
react-native
'
;
import
{
Button
}
from
'
react-native-elements
'
;
import
{
Button
,
normalize
}
from
'
react-native-elements
'
;
import
{
NavigationContainer
}
from
'
@react-navigation/native
'
;
import
{
createStackNavigator
}
from
'
@react-navigation/stack
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
import
DetailInfo
from
'
./DetailInfo
'
;
const
DateItem
=
({
dateitem
,
onPress
,
backgroundColor
,
textColor
,
flatListHeight
})
=>
{
const
Stack
=
createStackNavigator
();
const
DateItem
=
({
dateitem
,
textColor
,
onPress
,
flatListHeight
})
=>
{
return
(
<
TouchableOpacity
onPress
=
{
onPress
}
style
=
{[
style
.
dateContainer
,
backgroundColor
,
{
height
:
flatListHeight
}]}
>
<
Text
style
=
{
textColor
}
>
{
dateitem
}
<
/Text
>
<
Text
style
=
{{
color
:
'
blue
'
}}
>
100
,
000
<
/Text
>
style
=
{[
style
.
dateContainer
,
{
height
:
flatListHeight
}]}
>
<
Text
style
=
{
textColor
}
>
{
dateitem
.
idates
}
<
/Text
>
{
dateitem
.
type
&&
<
View
>
<
Text
style
=
{{
color
:
'
#1E90FF
'
}}
>
{
dateitem
.
type
.
input
?
dateitem
.
type
.
input
:
null
}
<
/Text
>
<
Text
style
=
{{
color
:
'
#DC143C
'
}}
>
{
dateitem
.
type
.
output
?
dateitem
.
type
.
output
:
null
}
<
/Text
>
<
/View
>
}
<
/TouchableOpacity
>
);
};
const
INIT_Data
=
[
{
date
:
"
2021-06-28
"
,
type
:
{
'
input
'
:
10000
,
'
output
'
:
1000
},
},
{
date
:
"
2021-07-01
"
,
type
:
{
'
input
'
:
50000
,
'
output
'
:
3500
},
},
{
date
:
"
2021-07-11
"
,
type
:
{
'
input
'
:
100000
,
'
output
'
:
2000
},
},
{
date
:
"
2021-08-14
"
,
type
:
{
'
input
'
:
15000
,
'
output
'
:
2010
},
},
];
function
Calendar
()
{
const
dateTostr
=
(
date
)
=>
{
//console.log('didididid', date)
const
dsy
=
date
.
getFullYear
();
const
dsm
=
(
'
0
'
+
(
date
.
getMonth
()
+
1
)).
slice
(
-
2
);
const
dsd
=
(
'
0
'
+
date
.
getDate
()).
slice
(
-
2
);
//console.log('return', dsy + '-' + dsm + '-' + dsd)
return
dsy
+
'
-
'
+
dsm
+
'
-
'
+
dsd
;
}
function
Calendar
({
navigation
})
{
const
date
=
new
Date
();
const
[
year
,
setYear
]
=
useState
(
date
.
getFullYear
());
const
[
month
,
setMonth
]
=
useState
(
date
.
getMonth
());
...
...
@@ -32,28 +71,48 @@ function Calendar() {
// 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함
const
tempDates
=
[];
const
testArr
=
[];
if
(
thisFirstDay
!=
0
)
{
// 첫째 날이 일요일이 아니라면
for
(
let
i
=
0
;
i
<
thisFirstDay
;
i
++
)
{
tempDates
.
unshift
(
prevLastDate
-
i
);
}
// 이전 달의 마지막 날짜부터 1씩 감소시켜서 배열에 값 추가.
//testArr.unshift({ ay: year, am: month, ad: prevLastDate - i });
const
re1
=
dateTostr
(
new
Date
(
year
,
month
-
1
,
prevLastDate
-
i
))
testArr
.
unshift
({
fd
:
re1
,
sd
:
prevLastDate
-
i
})
}
}
for
(
let
i
=
1
;
i
<=
thisLastDate
;
i
++
)
{
//이번 달 날짜
tempDates
.
push
(
i
);
//testArr.push({ ay: year, am: month + 1, ad: i });
const
re2
=
dateTostr
(
new
Date
(
year
,
month
,
i
))
testArr
.
push
({
fd
:
re2
,
sd
:
i
})
}
for
(
let
i
=
1
;
i
<=
6
-
thisLastDay
;
i
++
)
{
tempDates
.
push
(
i
);
//testArr.push({ ay: year, am: month + 2, ad: i });
const
re3
=
dateTostr
(
new
Date
(
year
,
month
+
1
,
i
))
testArr
.
push
({
fd
:
re3
,
sd
:
i
})
}
console
.
log
(
'
testArr
'
,
testArr
);
const
dates
=
tempDates
.
map
((
element
,
index
)
=>
({
key
:
`
${
index
}
`
,
idates
:
element
}));
const
testDates
=
testArr
.
map
((
obj
,
index
)
=>
({
key
:
`
${
index
}
`
,
tdates
:
obj
.
sd
}));
console
.
log
(
'
testDates
'
,
testDates
)
const
testID
=
dates
.
findIndex
(
obj
=>
obj
.
idates
==
28
);
if
(
testID
!==
-
1
)
{
//dates[testID] = { key: `${dates[testID].key}`, idates: dates[testID].idates, type: 'input', price: 10000 };
dates
[
testID
]
=
{
key
:
`
${
dates
[
testID
].
key
}
`
,
idates
:
dates
[
testID
].
idates
,
type
:
{
"
input
"
:
10000
,
"
output
"
:
1000
}
};
//console.log('타입확인', dates[testID]); //타입확인 {"idates": 28, "key": "1", "type": {"input": 10000, "output": 1000}}
//console.log('type', Object.keys(dates[testID].type)); //type ["input", "output"]
console
.
log
(
'
a
'
,
dates
[
testID
].
type
.
input
)
}
const
thisfirstID
=
tempDates
.
indexOf
(
1
);
// 이번 달 1일
const
thislastID
=
tempDates
.
lastIndexOf
(
thisLastDate
);
// 이번 달 마지막 날짜 인덱스
let
istoday
=
false
;
const
[
selectedKey
,
setSelectedKey
]
=
useState
(
null
);
const
renderDate
=
({
item
})
=>
{
const
backgroundColor
=
item
.
key
===
selectedKey
?
'
#87ceeb
'
:
'
#FFFAFA
'
;
let
color
=
'
#000000
'
;
if
(
item
.
idates
===
date
.
getDate
()
&&
month
===
todayM
&&
year
===
todayY
)
{
istoday
=
true
;
...
...
@@ -66,12 +125,10 @@ function Calendar() {
color
=
'
#a9a9a9
'
}
return
(
<
DateItem
dateitem
=
{
item
.
idates
}
onPress
=
{()
=>
setSelectedKey
(
item
.
key
)}
backgroundColor
=
{{
backgroundColor
}}
textColor
=
{{
color
}
}
flatListHeight
=
{
flatListHeight
/
5
}
/
>
<
DateItem
dateitem
=
{
item
}
textColor
=
{{
color
}}
onPress
=
{()
=>
navigation
.
navigate
(
'
DetailInfo
'
)
}
flatListHeight
=
{
flatListHeight
/
5
}
/
>
)
}
const
prevBtn
=
()
=>
{
setSelectedKey
(
null
)
if
(
month
<
1
)
{
setYear
(
year
-
1
)
setMonth
(
11
)
...
...
@@ -79,9 +136,7 @@ function Calendar() {
setMonth
(
month
-
1
)
}
};
const
nextBtn
=
()
=>
{
setSelectedKey
(
null
)
if
(
month
>
10
)
{
setYear
(
year
+
1
)
setMonth
(
0
)
...
...
@@ -89,15 +144,13 @@ function Calendar() {
setMonth
(
month
+
1
)
}
}
useEffect
(()
=>
{
setMonth
(
todayM
)
setYear
(
todayY
)
setSelectedKey
(
null
)
},
[])
const
onLayout
=
(
event
)
=>
{
const
{
x
,
y
,
height
,
width
}
=
event
.
nativeEvent
.
layout
;
const
onLayout
=
(
event
)
=>
{
const
{
x
,
y
,
height
,
width
}
=
event
.
nativeEvent
.
layout
;
setFlatListHeight
(
height
)
}
return
(
...
...
@@ -124,23 +177,21 @@ function Calendar() {
<
Text
style
=
{
style
.
DayText
}
>
토
<
/Text
>
<
Text
style
=
{
style
.
DayText
}
>
일
<
/Text
>
<
/View
>
<
FlatList
style
=
{
style
.
ListContainer
}
onLayout
=
{
onLayout
}
contentContainerStyle
=
{
style
.
wrapper
}
<
FlatList
onLayout
=
{
onLayout
}
data
=
{
dates
}
numColumns
=
{
7
}
renderItem
=
{
renderDate
}
extraData
=
{
selectedKey
}
/
>
/
>
<
Stack
.
Navigator
>
<
Stack
.
Screen
name
=
"
DetailInfo
"
component
=
{
DetailInfo
}
/
>
<
/Stack.Navigator
>
<
/SafeAreaView
>
<
/
>
)
}
}
;
const
style
=
StyleSheet
.
create
({
wrapper
:
{
alignItems
:
'
stretch
'
,
alignContent
:
'
stretch
'
},
EntContainer
:
{
//전체 (SafeAreaView)
flex
:
1
,
padding
:
20
...
...
@@ -162,11 +213,13 @@ const style = StyleSheet.create({
margin
:
10
},
Days
:
{
flexDirection
:
'
row
'
flexDirection
:
'
row
'
,
backgroundColor
:
'
#6495ED
'
},
DayText
:
{
flex
:
1
,
textAlign
:
'
center
'
textAlign
:
'
center
'
,
color
:
'
#FFFFFF
'
},
});
...
...
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