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
717409d1
Commit
717409d1
authored
Jul 12, 2021
by
Choi Ga Young
Browse files
캘린더(미완)
parent
cad8ca7f
Changes
2
Hide whitespace changes
Inline
Side-by-side
App.js
View file @
717409d1
import
*
as
React
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
StyleSheet
,
View
,
Text
,
TextInput
,
Button
}
from
'
react-native
'
;
import
{
NavigationContainer
}
from
'
@react-navigation/native
'
;
import
{
createBottomTabNavigator
}
from
'
@react-navigation/bottom-tabs
'
;
...
...
@@ -6,17 +6,23 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import
Monthly
from
'
./Monthly
'
;
import
Analy
from
'
./Analy
'
;
import
MoneyDB
from
'
./MoneyDB
'
;
import
Calendar
from
'
./Calendar
'
;
function
MainScreen
({
navigation
})
{
const
[
number
,
onChangeNumber
]
=
React
.
useState
(
null
);
const
[
number
,
onChangeNumber
]
=
useState
(
null
)
const
[
totalAssets
,
setTotalAssets
]
=
useState
(
0
)
//총 자산
return
(
<>
<
View
>
<
Text
style
=
{
style
.
Font
}
>
여기는
메인
페이지
입니다
.
<
/Text
>
<
Text
style
=
{
style
.
Font
}
>
아래는
input
테스트를
위한
것입니다
.
<
/Text
>
<
Text
style
=
{
style
.
Font
}
>
주간
캘린더
들어올
자리
<
/Text
>
<
View
style
=
{
style
.
Contents
}
>
<
Text
style
=
{
style
.
Font
}
>
총
자산
<
/Text
>
<
Text
style
=
{
style
.
Font
}
>
{
totalAssets
}
원
<
/Text
>
<
/View
>
<
TextInput
style
=
{
style
.
TextInput
}
onChangeText
=
{
onChangeNumber
}
onChangeText
=
{
onChangeNumber
}
keyboardType
=
"
numeric
"
/>
<
Text
>
입력한
숫자
보기
:
{
number
}
<
/Text
>
...
...
@@ -24,9 +30,9 @@ function MainScreen({ navigation }) {
<
Button
title
=
"
월별 페이지로 이동
"
onPress
=
{()
=>
navigation
.
navigate
(
'
Monthly
'
)}
/>
/
>
<
MoneyDB
/>
<
/>
<
/
>
)
}
...
...
@@ -36,30 +42,33 @@ function App() {
return
(
<
NavigationContainer
>
<
Tab
.
Navigator
screenOptions
=
{({
route
})
=>
({
tabBarIcon
:
({
focused
,
color
,
size
})
=>
{
let
iconName
;
tabBarIcon
:
({
focused
,
color
,
size
})
=>
{
let
iconName
;
if
(
route
.
name
===
'
Main
'
)
{
iconName
=
focused
?
'
home
'
:
'
home-outline
'
;
}
else
if
(
route
.
name
===
'
Monthly
'
)
{
iconName
=
focused
?
'
calendar
'
:
'
calendar-outline
'
;
}
else
if
(
route
.
name
===
'
Analy
'
)
{
iconName
=
focused
?
'
bar-chart
'
:
'
bar-chart-outline
'
;
}
if
(
route
.
name
===
'
Main
'
)
{
iconName
=
focused
?
'
home
'
:
'
home-outline
'
;
}
else
if
(
route
.
name
===
'
Monthly
'
)
{
iconName
=
focused
?
'
calendar
'
:
'
calendar-outline
'
;
}
else
if
(
route
.
name
===
'
Analy
'
)
{
iconName
=
focused
?
'
bar-chart
'
:
'
bar-chart-outline
'
;
}
else
if
(
route
.
name
===
'
Calendar
'
)
{
iconName
=
focused
?
'
calendar-sharp
'
:
'
calendar-sharp
'
;
}
// You can return any component that you like here!
return
<
Ionicons
name
=
{
iconName
}
size
=
{
size
}
color
=
{
color
}
/>
;
},
})}
// You can return any component that you like here!
return
<
Ionicons
name
=
{
iconName
}
size
=
{
size
}
color
=
{
color
}
/>
;
},
})}
tabBarOptions
=
{{
activeTintColor
:
'
tomato
'
,
activeTintColor
:
'
skyblue
'
,
inactiveTintColor
:
'
gray
'
,
}}
>
<
Tab
.
Screen
name
=
"
Main
"
component
=
{
MainScreen
}
/
>
<
Tab
.
Screen
name
=
"
Monthly
"
component
=
{
Monthly
}
/
>
<
Tab
.
Screen
name
=
"
Analy
"
component
=
{
Analy
}
/
>
<
Tab
.
Screen
name
=
"
Calendar
"
component
=
{
Calendar
}
/
>
<
/Tab.Navigator
>
<
/NavigationContainer
>
);
...
...
@@ -74,6 +83,11 @@ const style = StyleSheet.create({
},
Font
:
{
fontSize
:
24
},
Contents
:
{
justifyContent
:
"
center
"
,
alignItems
:
"
center
"
,
margin
:
10
}
});
export
default
App
;
Calendar.js
0 → 100644
View file @
717409d1
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
SafeAreaView
,
StyleSheet
,
View
,
Text
,
FlatList
,
TouchableOpacity
}
from
'
react-native
'
;
import
{
Button
}
from
'
react-native-elements
'
;
import
Ionicons
from
'
react-native-vector-icons/Ionicons
'
;
const
DateItem
=
({
dateitem
,
onPress
,
backgroundColor
,
textColor
})
=>
{
return
(
<
TouchableOpacity
onPress
=
{
onPress
}
style
=
{[
style
.
dateContainer
,
backgroundColor
]}
>
<
Text
style
=
{
textColor
}
>
{
dateitem
}
<
/Text
>
<
/TouchableOpacity
>
);
};
function
Calendar
()
{
const
date
=
new
Date
();
const
[
year
,
setYear
]
=
useState
(
date
.
getFullYear
());
const
[
month
,
setMonth
]
=
useState
(
date
.
getMonth
());
const
todayM
=
date
.
getMonth
();
const
todayY
=
date
.
getFullYear
();
const
prevLast
=
new
Date
(
year
,
month
,
0
);
//이전 달의 마지막 날
const
thisFirst
=
new
Date
(
year
,
month
,
1
);
//이번 달의 첫째 날
const
thisLast
=
new
Date
(
year
,
month
+
1
,
0
);
//이번 달의 마지막 날
const
thisFirstDay
=
thisFirst
.
getDay
();
//이번 달 첫번 째 요일
const
prevLastDate
=
prevLast
.
getDate
();
//이전 달 마지막 날짜
const
thisLastDate
=
thisLast
.
getDate
();
//이번 달 마지막 날짜
const
thisLastDay
=
thisLast
.
getDay
();
//이번 달 마지막 요일
// 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함
const
tempDates
=
[];
if
(
thisFirstDay
!=
0
)
{
// 첫째 날이 일요일이 아니라면
for
(
let
i
=
0
;
i
<
thisFirstDay
;
i
++
)
{
tempDates
.
unshift
(
prevLastDate
-
i
);
}
// 이전 달의 마지막 날짜부터 1씩 감소시켜서 배열에 값 추가.
}
for
(
let
i
=
1
;
i
<=
thisLastDate
;
i
++
)
{
//이번 달 날짜
tempDates
.
push
(
i
);
}
for
(
let
i
=
1
;
i
<=
6
-
thisLastDay
;
i
++
)
{
tempDates
.
push
(
i
);
}
const
dates
=
tempDates
.
map
((
element
,
index
)
=>
({
key
:
`
${
index
}
`
,
idates
:
element
}));
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
'
:
'
#ffffff
'
;
let
color
=
'
#000000
'
;
if
(
item
.
idates
===
date
.
getDate
()
&&
month
===
todayM
&&
year
===
todayY
)
{
istoday
=
true
;
}
if
(
istoday
)
{
color
=
'
#6495ed
'
istoday
=
false
;
}
if
(
!
(
item
.
key
>=
thisfirstID
&&
item
.
key
<
thislastID
+
1
))
{
color
=
'
#a9a9a9
'
}
return
(
<
DateItem
dateitem
=
{
item
.
idates
}
onPress
=
{()
=>
setSelectedKey
(
item
.
key
)}
backgroundColor
=
{{
backgroundColor
}}
textColor
=
{{
color
}}
/
>
)
}
const
prevBtn
=
()
=>
{
if
(
month
<
1
)
{
setYear
(
year
-
1
)
setMonth
(
11
)
}
else
{
setMonth
(
month
-
1
)
}
};
const
nextBtn
=
()
=>
{
if
(
month
>
10
)
{
setYear
(
year
+
1
)
setMonth
(
0
)
}
else
{
setMonth
(
month
+
1
)
}
}
useEffect
(()
=>
{
setMonth
(
todayM
)
setYear
(
todayY
)
setSelectedKey
(
null
)
},
[])
return
(
<>
<
SafeAreaView
>
<
View
style
=
{
style
.
Container
}
>
<
Text
style
=
{
style
.
Head
}
>
{
year
}
년
{
month
+
1
}
월
<
/Text
>
<
View
style
=
{
style
.
Buttons
}
>
<
Button
icon
=
{
<
Ionicons
name
=
'
chevron-back-sharp
'
onPress
=
{
prevBtn
}
size
=
{
15
}
color
=
'
black
'
/>
}
type
=
'
clear
'
/>
<
Button
title
=
'
Today
'
onPress
=
{()
=>
{
setMonth
(
todayM
);
setYear
(
todayY
)
}}
type
=
'
clear
'
/>
<
Button
icon
=
{
<
Ionicons
name
=
'
chevron-forward-sharp
'
onPress
=
{
nextBtn
}
size
=
{
15
}
color
=
'
black
'
/>
}
type
=
'
clear
'
/>
<
/View
>
<
/View
>
<
FlatList
ListHeaderComponent
=
{
<
View
style
=
{
style
.
Days
}
>
<
Text
>
월
<
/Text
>
<
Text
>
화
<
/Text
>
<
Text
>
수
<
/Text
>
<
Text
>
목
<
/Text
>
<
Text
>
금
<
/Text
>
<
Text
>
토
<
/Text
>
<
Text
>
일
<
/Text
>
<
/View
>
}
data
=
{
dates
}
renderItem
=
{
renderDate
}
numColumns
=
{
7
}
extraData
=
{
selectedKey
}
/
>
<
/SafeAreaView
>
<
/
>
)
}
const
style
=
StyleSheet
.
create
({
Head
:
{
fontSize
:
24
,
},
Container
:
{
justifyContent
:
"
center
"
,
alignItems
:
"
center
"
,
},
dateContainer
:
{
//height:300,
//backgroundColor: '#FFFFFF',
margin
:
10
},
Buttons
:
{
flexDirection
:
'
row
'
,
margin
:
10
},
Days
:
{
flexDirection
:
'
row
'
},
});
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