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;