Flutter table_calendar 라이브러리
table_calendar란?
날짜 선택 기능이 있는 앱 만들 때 사용하는 Flutter 달력 라이브러리
앱에서 많이 사용하는 기능:
•
일정 관리 앱
•
일기장 앱
•
출석 체크 앱
•
예약 앱
•
Todo 달력
설치 방법
pubspec.yaml
dependencies:
table_calendar: ^3.0.0
YAML
복사
import
import 'package:table_calendar/table_calendar.dart';
Dart
복사
기본 달력 만들기
가장 기본 코드
TableCalendar(
firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: DateTime.now(),
)
Dart
복사
달력 필수 속성 3개
속성 | 설명 |
firstDay | 달력 시작 날짜 |
lastDay | 달력 끝 날짜 |
focusedDay | 현재 표시 날짜 |
날짜 선택 기능 만들기 (중요)
달력에서 날짜 클릭 기능
DateTime _selectedDay = DateTime.now();
DateTime _focusedDay = DateTime.now();
Dart
복사
TableCalendar(
firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: _focusedDay,
selectedDayPredicate: (day) {
return isSameDay(_selectedDay, day);
},
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
});
},
)
Dart
복사
동작 흐름
날짜 클릭
↓
onDaySelected 실행
↓
selectedDay 변경
↓
달력 UI 업데이트
Plain Text
복사
Flutter State 관리 연습에 매우 좋다.
일정(Event) 표시하기
달력 아래에 일정 표시 기능 만들 수 있음.
이벤트 데이터 예시
Map<DateTime, List<String>> events = {
DateTime(2026, 3, 26): ['운동', '공부'],
DateTime(2026, 3, 27): ['회의'],
};
Dart
복사
이벤트 가져오는 함수
List<String> getEventsForDay(DateTime day) {
return events[day] ?? [];
}
Dart
복사
달력에 이벤트 연결
TableCalendar(
firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: _focusedDay,
eventLoader: getEventsForDay,
)
Dart
복사
이렇게 하면 달력 날짜 아래 점(dot)이 표시된다.
달력 + ListView 일정 표시
일반적으로 많이 만드는 구조
TableCalendar
↓
선택된 날짜 일정
↓
ListView
Plain Text
복사
예시 구조
Column(
children: [
TableCalendar(...),
Expanded(
child: ListView(
children: getEventsForDay(_selectedDay)
.map((event) => ListTile(title: Text(event)))
.toList(),
),
)
],
)
Dart
복사
이 구조 진짜 많이 사용한다.
많이 만드는 앱 예시
table_calendar 사용하는 앱
앱 | 설명 |
일기장 앱 | 날짜별 일기 |
Todo 앱 | 날짜별 할일 |
출석 앱 | 출석 체크 |
예약 앱 | 예약 날짜 선택 |
공부 기록 앱 | 공부 기록 |
달력 앱 구조 (중요)
Flutter 달력 앱 기본 구조
Calendar 화면
↓
날짜 선택
↓
해당 날짜 데이터 불러오기
↓
ListView 표시
↓
추가 / 삭제 / 수정
Plain Text
복사
이 구조는
•
일정 앱
•
일기 앱
•
Todo 앱
전부 동일한 구조이다.
정리
table_calendar 핵심 속성 5개
속성 | 설명 |
firstDay | 시작 날짜 |
lastDay | 끝 날짜 |
focusedDay | 현재 달 |
selectedDayPredicate | 선택 날짜 표시 |
onDaySelected | 날짜 클릭 이벤트 |
table_calendar는 Flutter에서 달력 UI와 날짜 선택 기능을 제공하는 라이브러리이다.
Flutter 앱 프로젝트 추천
수업 프로젝트 추천 조합
프로젝트 | 사용 라이브러리 |
일기장 앱 | table_calendar + path_provider |
Todo 달력 | table_calendar |
출석 체크 앱 | table_calendar + shared_preferences |
비밀 일정 앱 | table_calendar + SQLite |
예약 앱 | table_calendar + Firebase |