기존 애플리케이션은 당일 할 일 관리에 초점이 맞추어져 있었으나, 특정 날짜에 시작하거나 종료되는 일정이나 장기적인 계획을 관리하는 데에는 한계가 있었다. 이를 보완하기 위해 월 단위로 일정을 직관적으로 확인할 수 있는 캘린더 뷰를 도입하였다.

캘린더 구현에는 react-native-calendars 라이브러리를 사용하였다. 특정 날짜에 할 일이 존재할 경우 markedDates 속성에 날짜와 표시 여부를 객체 형태로 전달하여 시각적으로 구분할 수 있다. 또한 markingType을 period로 지정하면 일정의 시작일과 종료일을 기준으로 중간 날짜를 색상으로 채워 연속적인 기간을 표시할 수 있다.

{
  '2025-08-25': { startingDay: true, color: 'skyblue' },
  '2025-08-26': { color: 'skyblue' },
  '2025-08-27': { endingDay: true, color: 'skyblue' }
}

이를 위해 todos 데이터를 순회하며 시작일과 종료일에 맞춰 markedDates 객체를 동적으로 생성하는 로직을 구현하였다. 이렇게 가공된 데이터는 캘린더 컴포넌트에 전달되며, Zustand 전역 상태에 저장된 todos가 자동으로 반영되도록 구성하였다.

날짜 유효성 검증도 추가하였다. 사용자가 종료일을 선택할 때 해당 날짜가 시작일보다 앞서는 경우를 차단해야 했다. 이를 위해 JavaScript Date 객체를 사용하여 두 날짜를 비교하고, 종료일이 시작일보다 빠른 경우 Alert 메시지를 출력한 뒤 잘못된 입력을 초기화하는 방식으로 처리하였다.

캘린더 기능이 도입되면서 동일한 todos 데이터가 여러 화면에서 나오기 시작했다. 오늘 할 일, 캘린더, 프로젝트별 보기 화면이 모두 같은 데이터를 사용하므로 데이터 변경이 모든 화면에 즉시 반영되어야 했다. Zustand를 활용하여 todos 배열과 관련 함수를 전역 상태로 관리함으로써 이 문제를 해결하였다. 새로운 할 일이 추가되거나 수정될 경우 자동으로 리렌더링되어 최신 데이터를 표시할 수 있었다.