[React Native] react-native-calendars 사용하기

공식 문서를 참고하여 작성된 문서입니다.

1. 설치

$ npm install --save react-native-calendars

2. 언어 설정

 LocaleConfig.locales["kr"] = {
    monthNames: [
      "1월",
      "2월",
      "3월",
      "4월",
      "5월",
      "6월",
      "7월",
      "8월",
      "9월",
      "10월",
      "11월",
      "12월",
    ],
    monthNamesShort: [
      "1월",
      "2월",
      "3월",
      "4월",
      "5월",
      "6월",
      "7월",
      "8월",
      "9월",
      "10월",
      "11월",
      "12월",
    ],
    dayNames: [
      "월요일",
      "화요일",
      "수요일",
      "목요일",
      "금요일",
      "토요일",
      "일요일",
    ],
    dayNamesShort: ["월", "화", "수", "목", "금", "토", "일"],
    today: "오늘",
  };
  LocaleConfig.defaultLocale = "kr";

  const handleModalClose = () => {
    setModalVisible(false);
  };

4. 스타일링

return (
    <View style={styles.container}>
      <ScrollView>
        <Calendar
          theme={{
            backgroundColor: "#ffffff",
            calendarBackground: "#ffffff",
            textSectionTitleColor: Colors.darkblue,
            textSectionTitleDisabledColor: Colors.darkblue,
            //selectedDayBackgroundColor: Colors.main,
            //selectedDayTextColor: "#ffffff",
            todayTextColor: Colors.point,
            dayTextColor: "#2d4150",
            //textDisabledColor: Colors.darkblue,
            //dotColor: "#00adf5",
            selectedDotColor: "#ffffff",
            dotStyle: {
              width: 10,
              height: 5,
            },
            arrowColor: "orange",
            disabledArrowColor: "#d9e1e8",
            monthTextColor: Colors.main,
            //indicatorColor: "blue",
            textDayFontFamily: "nnsq-bold",
            textMonthFontFamily: "nnsq-bold",
            textDayHeaderFontFamily: "nnsq-bold",
            textDayFontWeight: "300",
            textMonthFontWeight: "300",
            textDayHeaderFontWeight: "300",
            textDayFontSize: 20,
            textMonthFontSize: 25,
            textDayHeaderFontSize: 20,
            weekVerticalMargin: 10,
          }}
          markingType={"multi-dot"}
          markedDates={{
            ...renderDots(),
            [selected]: {
              selected: true,
              disableTouchEvent: true,
              selectedColor: Colors.main,
            },
          }}
          style={styles.calendar}
          onDayPress={
            (day) => {
              setSelected(day.dateString);
              //console.log(day);
            }
            // setModalVisible(true);
          }
        />
        <View style={styles.dailyContainer}>
          <Daily type={"schedule"} title={selected} />
        </View>
      </ScrollView>
    </View>
  );
}

5. 참고 문헌
1. ㄷㄷㄷㄷㄷㄷㄷㄷㄷ