table_calendar

dependencies: table_calendar: ^3.0.0

import 'package:table_calendar/table_calendar.dart';

TableCalendar( firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31), focusedDay: DateTime.now(), )

DateTime _selectedDay = DateTime.now(); DateTime _focusedDay = DateTime.now();

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; }); }, )

날짜 클릭 ↓ onDaySelected 실행 ↓ selectedDay 변경 ↓ 달력 UI 업데이트

Map<DateTime, List<String>> events = { DateTime(2026, 3, 26): ['운동', '공부'], DateTime(2026, 3, 27): ['회의'], };

List<String> getEventsForDay(DateTime day) { return events[day] ?? []; }

TableCalendar( firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31), focusedDay: _focusedDay, eventLoader: getEventsForDay, )

TableCalendar ↓ 선택된 날짜 일정 ↓ ListView

Column( children: [ TableCalendar(...), Expanded( child: ListView( children: getEventsForDay(_selectedDay) .map((event) => ListTile(title: Text(event))) .toList(), ), ) ], )

Calendar 화면 ↓ 날짜 선택 ↓ 해당 날짜 데이터 불러오기 ↓ ListView 표시 ↓ 추가 / 삭제 / 수정