[react-native] weekly calendar 넣어보기

 

 

웹으로 쓰고 있던 ToT를 app으로 옮기기로 결정하면서 UI부분도 많이 변경되었다. 

그 과정에서 home에 weekly 캘린더를 넣게 되었는데 React-Native는 처음이기도하고 감이 잘 안 잡혀서 캘린더 라이브러리를 찾아보다가 사용하게 된 calendar-strip

 

 

구현이 필요한 기능

• weekly로 보여야함
• 요일별로 클릭이 가능해야함
• 요일이 클릭되면 해당 요일의 데이터들이 보여야함
• 화살표를 클릭하면 주별로 이동이 되어야함
• 데이터가 있는 요일은 요일에 표시가 되어있어야함

UI 참고

 

 

 

사용한 라이브러리

 

내가 필요했던 모든 기능이 손쉽게 구현이 가능하고 다양한 demo 버젼이 만들어져있어서 사용 방법이 상세히 설명되어있답니다 

 

https://www.npmjs.com/package/react-native-calendar-strip

react-native-calendar-strip

 

https://github.com/BugiDev/react-native-calendar-strip

GitHub - BugiDev/react-native-calendar-strip: Easy to use and visually stunning calendar component for React Native.

 

 

 

코드 블록

expo로 앱을 만들고 있었는데 

npm install react-native-calendar-strip

 

으로 설치해주고 시작하면 된다. 

        <CalendarStrip
          showMonth={false}  // month 헤더 없애기
          style={{ height: 80, paddingTop: 0, paddingBottom: 0 }}
          calendarColor={"#ffffff"} 
          calendarHeaderStyle={{ color: "black" }}
          dateNumberStyle={{ color: "black" }}
          dateNameStyle={{ color: "black" }}
          highlightDateContainerStyle={{ backgroundColor: "#647ce6" }} //동그라미 백그라운드
          iconContainer={{ flex: 0.1 }}
          highlightDateNumberStyle={{ color: "white" }} // 하이라이트된 요일컬러
          highlightDateNameStyle={{ color: "white" }}
          selectedDate={selectedDate} // 선택된 날짜
          onWeekChanged={handleWeekChange} // 주가 변경될 때 
          onDateSelected={handleDateSelect} // 요일을 눌렀을 때 나올 함수
          markedDates={markedDate} // 요일 밑에 동그라미 마크 표시해주기
        />

 

  const handleDateSelect = (date: any) => {
    setSelectedDate(date); // 선택된 날짜를 상태에 저장
    const selected = moment(date);
    const year = selected.year(); // 2024
    const month = selected.month() + 1; // 10 (0부터 시작하므로 +1)
    const day = selected.date();

    // 요일이 변경될 때마다 해당 날짜의 데이터를 가져오기 위한 data fetch
    // 요일 밑에 data 표시해줘야해서 가져오는 것 - 
    // 캘린더와 상관없음
    fetchRecords(user.$id, year, month, day).then(
      ([todayRecordRes, todayTotalRecordRes]) => {
        setTodayRecord(todayRecordRes);
        setTodayTotalRecord(todayTotalRecordRes);
      }
    );

    setCurrentMonth(selected.format('MM')); // 주 시작 날짜 기준으로 월 업데이트
    setCurrentYear(selected.format('YYYY'))
  };

 

  const handleWeekChange = (startOfWeek : any) => {
  // 요일을 변경하는 화살표를 눌렀을 때 주의 시작점이 아니라 주의 마지막 날에 초점이 되게 설정
  // 그래서 add 6이 된다. 
  // 요일 바꾸면 주의 시작점으로 이동하는게 디폴트값
  
    setCurrentWeekStart(startOfWeek.add(6, 'days'));
    
    // 주가 바뀔 때 6일치 weekly data를 가져오기 위한 data fetch 
    // 가져와서 mark를 위한 함수에 넣어준다 
    getWeeklyRecords(user.$id, startOfWeek, 7).then((res) => {
      checkingForMark(res);
    });
  };

 

 

// 이런 배열 형태로 들어가야한다 
// 이건 예시일 뿐. 필요한 데이터를 가공해서 array 모양으로 만들어주면 됨
const markedDate = [{
        date: moment(),
        dots: [{ color: "#647ce6", selectedColor: "white" }],
      }]

 

 

 

결과물