React-native-calenders 원더윅스 앱 만들기

이번시간에는 앱에 캘린더를 추가해 보도록 하자. 먼저 expo에서 제공하는 켈린더가 있는지 확인하자. 

 

expo-calender를 검색하니 최상단에 https://docs.expo.dev/versions/latest/sdk/calendar/ 검색결과가 나온다. 

검색 결과에 따라 들어가면 SDK 가 나온다. SDK는 Software Development Kit로 개발 키트라고 생각하면 된다. 무튼 expo-calender에서 제공하는 기능은 캘린더, 이벤트, 알림 레코드랑 상호작용하는 SDK인데. 우리가 원하는 기능은 UI를 만들어 주는 컴포넌트를 원했기 때문에 설치하지 말자. 다만 나중에 알람 기능을 만들 때 필요할 수 있으니 알아두자. 

 

다른 검색 결과로 react-native-calenders가 나온다 문서를 확인해보니. 내가 원하는 기간표시도 가능하다.  

 

React-native-calendars

https://www.npmjs.com/package/react-native-calendars

react-native-calendars

yarn add react-native-calendars

 

expo를 사용하고 있으니 

npx expo install react-native-calendars

 

위 방식으로 설치를 시작하자 설치가 완료되면 모듈을 추가하자.

공식 문서를 읽고 예시에서 제공되는 Period Marking를 사용하면 좋겠다.

위주로 찾아보면 공식사이트에서 쉽게 사용하는 방법을 알려준다. 따라서 작업을 진행해보자 

 

https://wix.github.io/react-native-calendars/docs/Components/Calendar#calendar-examples

Calendar | RNC

 

1. 모듈 및 옵션 확인해서 추가하기 

import { router } from "expo-router";
import { Button, Text, View } from "react-native";
import { Calendar } from "react-native-calendars";

export default function Home(){
  const handleModalButton = () => {
    router.push('/userInputModal')
  }

  return <View>
    <Text>Home </Text>

    <Calendar
      markingType={'period'}
      markedDates={{
        '2024-12-20': {textColor: 'green'},
        '2024-12-22': {startingDay: true, color: 'green'},
        '2024-12-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
        '2024-12-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
      }}

      enableSwipeMonths={true}
      hideArrows={false}
    />
    <Button title="모달" onPress={handleModalButton}></Button>
  </View>
}

 

• markingType을 period로 세팅 
• markingDates '2024-12-25': {selected: true, endingDay: true'}, '2024-12-26': {selected: false, endingDay: true'}, 형식으로 맞춰주자
• enableSwipeMonths를 true 스와이프 기능 제공

 

https://github.com/ckdtjs505/wonder_weeks/commit/40687cef16918189c0afadfd735923a73c5cc98a

feat: 캘린더 추가하기 · ckdtjs505/wonder_weeks@40687ce

 

2. 월, 일 표시를 한국어로 변경하기

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

LocaleConfig.defaultLocale = 'ko';

https://github.com/ckdtjs505/wonder_weeks/commit/d03bc8a07961cfd9f7a217739dd51604c9da3f27

feat: 캘린더 한국어로 변경 · ckdtjs505/wonder_weeks@d03bc8a

 

3. 원더윅스 계산해서 마킹하기

export const getWonderweeks = ({day, color } : any) => {
    const birthDate = new Date(day);
    
    // 주차별 범위 정의 (시작 주 ~ 종료 주)
    const weekRanges = [
        { weeks: 1, start: 4, end: 6 },
        { weeks: 2, start: 7, end: 10 },
        { weeks: 3, start: 11, end: 14 },
        { weeks: 4, start: 15, end: 20 },
        { weeks: 5, start: 23, end: 27 },
        { weeks: 6, start: 34, end: 38 },
        { weeks: 7, start: 42, end: 47 },
        { weeks: 8, start: 51, end: 55 },
        { weeks: 9, start: 60, end: 65 },
        { weeks: 10, start: 71, end: 76 },
    ];
    
    const result = {};
    
    for (const range of weekRanges) {
        // 시작 날짜와 끝 날짜 계산
        const startDay = new Date(birthDate);
        startDay.setDate(startDay.getDate() + range.start * 7 ); // 주 시작일로 맞추기
    
        const endDay = new Date(birthDate);
        endDay.setDate(endDay.getDate() - 1 + range.end * 7); // 주 종료일로 맞추기
    
        // 현재 주차 범위의 날짜를 순회하며 객체 생성
        for (
        let currentDate = new Date(startDay);
        currentDate <= endDay;
        currentDate.setDate(currentDate.getDate() + 1)
        ) {
    
            const currentDateStr = currentDate.toISOString().split('T')[0]; // ISO 형식으로 날짜 키 생성

            if( currentDateStr )
            // 각 날짜를 객체에 추가
            result[currentDateStr] = {
                startingDay: currentDate.toDateString() === startDay.toDateString(),
                endingDay: currentDate.toDateString() === endDay.toDateString(),
                color : color
            };
        }
    }
    
    return result;
}

원더윅스 계산 함수를 만들어 호출하자. 

export default function Home(){
  const handleModalButton = () => {
    router.push('/userInputModal')
  }

  const wonderweeks = getWonderweeks({
    day : '2024-11-11',
    color : '#71C9CE'
  });

  return <View>
    <Text>Home </Text>

    <Calendar
      markingType={'period'}
      markedDates={{
        ...wonderweeks
      }}

      enableSwipeMonths={true}
      hideArrows={false}
    />
    <Button title="모달" onPress={handleModalButton}></Button>
  </View>
}

 

https://github.com/ckdtjs505/wonder_weeks/commit/3c959dd6cd8b1f2a3bbfcfa7963d019b70038037

feat: 원더윅스 계산 후 마킹하기 · ckdtjs505/wonder_weeks@3c959dd

 

정리

• React-native-calenders를 사용하여 RN에서 쉽게 캘린더를 구현 할 수 있다
• wonder weeks를 표시하는 markedDate를 값을 넣어 원더 윅스 값을 표현할 수 있다. 

마무리

• calenders 공식 문서를 제대로 살펴보면 없는게 없다.