Commit 717409d1 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

캘린더(미완)

parent cad8ca7f
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;
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment