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, flatListHeight }) => { return ( {dateitem} 100,000 ); }; 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 [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 = []; 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' : '#FFFAFA'; 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 ( setSelectedKey(item.key)} backgroundColor={{ backgroundColor }} textColor={{ color }} flatListHeight={flatListHeight / 5} /> ) } const prevBtn = () => { setSelectedKey(null) if (month < 1) { setYear(year - 1) setMonth(11) } else { setMonth(month - 1) } }; const nextBtn = () => { setSelectedKey(null) if (month > 10) { setYear(year + 1) setMonth(0) } else { setMonth(month + 1) } } useEffect(() => { setMonth(todayM) setYear(todayY) setSelectedKey(null) }, []) const onLayout=(event)=> { const {x, y, height, width} = event.nativeEvent.layout; setFlatListHeight(height) } return ( <> {year} 년 {month + 1} 월