캘린더(미완)

App.js

-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

+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