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

캘린더 배열 수정 중

parent 360b9ce8
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 },
},
];
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() {
}
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}
<FlatList
onLayout={onLayout}
contentContainerStyle={style.wrapper}
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'
},
});
......
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