Calendar.js

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native';
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 Stack = createStackNavigator();

const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
  return (
    <TouchableOpacity onPress={onPress}
      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({ navigation }) {
  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 [flatListHeight, setFlatListHeight] = useState(400)

  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 = [];
  const testArr = [];
  if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면
    for (let i = 0; i < thisFirstDay; i++) {
      tempDates.unshift(prevLastDate - i);
      //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 renderDate = ({ item }) => {
    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} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo')} flatListHeight={flatListHeight / 5} />
    )
  }
  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)
  }, [])

  const onLayout = (event) => {
    const { x, y, height, width } = event.nativeEvent.layout;
    setFlatListHeight(height)
  }
  return (
    <>
      <SafeAreaView style={style.EntContainer}>
        <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>
        <View style={style.Days}>
          <Text style={style.DayText}>월</Text>
          <Text style={style.DayText}>화</Text>
          <Text style={style.DayText}>수</Text>
          <Text style={style.DayText}>목</Text>
          <Text style={style.DayText}>금</Text>
          <Text style={style.DayText}>토</Text>
          <Text style={style.DayText}>일</Text>
        </View>
        <FlatList
          onLayout={onLayout}
          data={dates}
          numColumns={7}
          renderItem={renderDate}
        />
        <Stack.Navigator>
          <Stack.Screen name="DetailInfo" component={DetailInfo} />
        </Stack.Navigator>
      </SafeAreaView>
    </>
  )
};

const style = StyleSheet.create({
  EntContainer: { //전체 (SafeAreaView)
    flex: 1,
    padding: 20
  },
  Head: { //00년00월
    fontSize: 24,
  },
  Container: { //년월, 버튼 뷰에 적용
    justifyContent: "center",
    alignItems: "center",
  },
  dateContainer: { //각 date에 적용 (Text 태그), DateItem 컴포넌트에 적용
    flex: 1,
    borderWidth: 0.8,
    borderColor: '#DCDCDC'
  },
  Buttons: {
    flexDirection: 'row',
    margin: 10
  },
  Days: {
    flexDirection: 'row',
    backgroundColor: '#6495ED'
  },
  DayText: {
    flex: 1,
    textAlign: 'center',
    color: '#FFFFFF'
  },
});

export default Calendar;