Commit ab8220c3 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

캘린더 배열 수정 중

parent 360b9ce8
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native'; 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 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 ( return (
<TouchableOpacity onPress={onPress} <TouchableOpacity onPress={onPress}
style={[style.dateContainer, backgroundColor, {height: flatListHeight}]}> style={[style.dateContainer, { height: flatListHeight }]}>
<Text style={textColor}>{dateitem}</Text> <Text style={textColor}>{dateitem.idates}</Text>
<Text style={{color:'blue'}}>100,000</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> </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 date = new Date();
const [year, setYear] = useState(date.getFullYear()); const [year, setYear] = useState(date.getFullYear());
const [month, setMonth] = useState(date.getMonth()); const [month, setMonth] = useState(date.getMonth());
...@@ -32,28 +71,48 @@ function Calendar() { ...@@ -32,28 +71,48 @@ function Calendar() {
// 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함 // 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함
const tempDates = []; const tempDates = [];
const testArr = [];
if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면 if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면
for (let i = 0; i < thisFirstDay; i++) { for (let i = 0; i < thisFirstDay; i++) {
tempDates.unshift(prevLastDate - 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++) { //이번 달 날짜 for (let i = 1; i <= thisLastDate; i++) { //이번 달 날짜
tempDates.push(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++) { for (let i = 1; i <= 6 - thisLastDay; i++) {
tempDates.push(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 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 thisfirstID = tempDates.indexOf(1); // 이번 달 1일
const thislastID = tempDates.lastIndexOf(thisLastDate); // 이번 달 마지막 날짜 인덱스 const thislastID = tempDates.lastIndexOf(thisLastDate); // 이번 달 마지막 날짜 인덱스
let istoday = false; let istoday = false;
const [selectedKey, setSelectedKey] = useState(null);
const renderDate = ({ item }) => { const renderDate = ({ item }) => {
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;
...@@ -66,12 +125,10 @@ function Calendar() { ...@@ -66,12 +125,10 @@ function Calendar() {
color = '#a9a9a9' color = '#a9a9a9'
} }
return ( 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 = () => { const prevBtn = () => {
setSelectedKey(null)
if (month < 1) { if (month < 1) {
setYear(year - 1) setYear(year - 1)
setMonth(11) setMonth(11)
...@@ -79,9 +136,7 @@ function Calendar() { ...@@ -79,9 +136,7 @@ function Calendar() {
setMonth(month - 1) setMonth(month - 1)
} }
}; };
const nextBtn = () => { const nextBtn = () => {
setSelectedKey(null)
if (month > 10) { if (month > 10) {
setYear(year + 1) setYear(year + 1)
setMonth(0) setMonth(0)
...@@ -89,15 +144,13 @@ function Calendar() { ...@@ -89,15 +144,13 @@ function Calendar() {
setMonth(month + 1) setMonth(month + 1)
} }
} }
useEffect(() => { useEffect(() => {
setMonth(todayM) setMonth(todayM)
setYear(todayY) setYear(todayY)
setSelectedKey(null)
}, []) }, [])
const onLayout=(event)=> { const onLayout = (event) => {
const {x, y, height, width} = event.nativeEvent.layout; const { x, y, height, width } = event.nativeEvent.layout;
setFlatListHeight(height) setFlatListHeight(height)
} }
return ( return (
...@@ -124,23 +177,21 @@ function Calendar() { ...@@ -124,23 +177,21 @@ function Calendar() {
<Text style={style.DayText}></Text> <Text style={style.DayText}></Text>
<Text style={style.DayText}></Text> <Text style={style.DayText}></Text>
</View> </View>
<FlatList style={style.ListContainer} <FlatList
onLayout={onLayout} onLayout={onLayout}
contentContainerStyle={style.wrapper}
data={dates} data={dates}
numColumns={7} numColumns={7}
renderItem={renderDate} renderItem={renderDate}
extraData={selectedKey} /> />
<Stack.Navigator>
<Stack.Screen name="DetailInfo" component={DetailInfo} />
</Stack.Navigator>
</SafeAreaView> </SafeAreaView>
</> </>
) )
} };
const style = StyleSheet.create({ const style = StyleSheet.create({
wrapper: {
alignItems: 'stretch',
alignContent: 'stretch'
},
EntContainer: { //전체 (SafeAreaView) EntContainer: { //전체 (SafeAreaView)
flex: 1, flex: 1,
padding: 20 padding: 20
...@@ -162,11 +213,13 @@ const style = StyleSheet.create({ ...@@ -162,11 +213,13 @@ const style = StyleSheet.create({
margin: 10 margin: 10
}, },
Days: { Days: {
flexDirection: 'row' flexDirection: 'row',
backgroundColor: '#6495ED'
}, },
DayText: { DayText: {
flex: 1, flex: 1,
textAlign: 'center' textAlign: 'center',
color: '#FFFFFF'
}, },
}); });
......
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