🎉Table Calendar

Table Calendar

Flutter 에서 [ 프로젝트 ] - 냥이월드 에서 캘린더를 사용하게 될 일이 생겨서 캘린더에 대해 검색하고 알아보았습니다.

 

Flutter에서는 Table Calendar 가 꽤 유명하고 많이 쓰인다고 하여, 다음 링크를 참고하였습니다.

 

https://pub.dev/packages/table_calendar

table_calendar | Flutter package

 

-- pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.0.9

 

pub table_calendar 를 설치

 

기본 Empty App 에서 TableCalendar 를 넣어주고 하나하나 뜯어봅시다.

TableCalendar

- firstDay: 시작되는 기준 ( 그 날짜 이전으로는 스크롤이 불가 )

- lastDay: 마지막날 기준 ( 그 날짜 이후로는 스크롤이 불가 )

- focusedDay: 현재의 표시될 날짜 ( 이 날짜 기준으로 달력에 그 월이 표시)

 

default calendar

 

- 상단 header 스타일 수정

 

headerStyle 

 

formatButtonVisible - 오른쪽 2 week 이런것을 지워주는 역할

titleCenterd - 타이틀 중앙 유무

titleTextFormat - 날짜 ( 국가 관련 )

 

- 다른 날 선택 했을 때, 이벤트 ( 위 코드로는 아마 다른 날짜가 선택이 되지 않을겁니다. )

 

앱을 이제 StatefulWidget으로 바꿔주고, 두가지 필드(Filed) 를 사용해 보겠습니다.

📢 Filed ? 는 class 내에 변수를 의미 합니다.

보통의 경우 Instance 변수, 멤버 변수라고 하지만
Flutter & Dart 에서는 Filed 변수라고 칭합니다.

 

날짜 변경

 

 

공식문서에서도  selectedDayPredicate, onDaySelected 예시가 위와 비슷하게 있습니다.

 

selectedDay & focusedDay가 헷갈려서 위 처럼 테이블처럼 정리 했고.

 

selectedDayPredicate 랑 onDaySelected가 이해하기 힘들었습니다.

 

그래서 간단히 요약해서 알아낸정보로 보자면.

 

1. 사용자가 22일을 선택합니다. 

2. onDaySelected 함수가 호출됩니다.

3. _onDaySelected 에서 setState로 _selectedDay 와 _focusedDay가 변경됩니다.

4. setState가 있으니 rerender이 됩니다.

5. rerender이 되면서 TableCalendar 에서는 2025년 10월 1일 ~ 31일까지 싹 다 체크를 하는데

selectedDayPredicate에서는 _selectedDay 와 day 를 비교하여 아까 제가 선택한 날짜인 2025-10-22일

 

즉 _selectedDay 가 2025-10-22일 이고, 루프로 돌면서 day가 2025-10-22 되었을 때, 캘린더 ui에서는 2025-10-22일에 동그란 파란색을 그려줍니다 ( 기본 스타일 )

 

22일 선택 했을 때