Table Calendar

import 'package:calendar_test/const/colors.dart'; import 'package:flutter/material.dart'; import 'package:table_calendar/table_calendar.dart'; class Calendar extends StatelessWidget { final DateTime? selectedDay; final DateTime focusedDay; final OnDaySelected? onDaySelected; Calendar({ required this.selectedDay, required this.focusedDay, required this.onDaySelected, Key? key, }) : super(key: key); @override Widget build(BuildContext context) { final defaultBoxDeco = BoxDecoration( color: Colors.grey[200], borderRadius: BorderRadius.circular(6.0), ); final defaultTextStyle = TextStyle( color: Colors.grey[0600], fontWeight: FontWeight.w700, ); return TableCalendar( // change the language (use intl with it) locale: 'ko_KR', // which day to show focusedDay: focusedDay, // past most date firstDay: DateTime(1800), // future most date lastDay: DateTime(3000), // header style headerStyle: HeaderStyle( formatButtonVisible: false, // remove 2 weeks button titleCentered: true, titleTextStyle: TextStyle( fontWeight: FontWeight.w700, fontSize: 16.0, ), ), // calendar style calendarStyle: CalendarStyle( isTodayHighlighted: false, // remove today highlight // DATE BOX DECORATION // weekdays defaultDecoration: defaultBoxDeco, // weekends weekendDecoration: defaultBoxDeco, // selected date selectedDecoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(6.0), border: Border.all( color: PRIMARY_COLOR, width: 1.0, ), ), // DATE TEXT STYLES // weekday text defaultTextStyle: defaultTextStyle, // weekend text weekendTextStyle: defaultTextStyle, // selected date selectedTextStyle: defaultTextStyle.copyWith( color: PRIMARY_COLOR, ), // error // [problem] outside dates are set as circular shape with animation // [solution] make outside shape to rectangle outsideDecoration: BoxDecoration( shape: BoxShape.rectangle, ), // [problem] page doesn't move to the date selected outside // [solution] change focusedDay ), // store input data of date selected onDaySelected: onDaySelected, // enable to select date and display selectedDayPredicate: (DateTime day) { if (selectedDay == null) { return false; } return day.year == selectedDay!.year && day.month == selectedDay!.month && day.day == selectedDay!.day; }, ); } }