1.庫導入

在pubspec.yaml文件中

dev_dependencies:
table_calendar: ^3.2.0

2. 代碼編寫

TableCalendar(daysOfWeekHeight: 20,availableGestures: AvailableGestures.horizontalSwipe,firstDay:? DateTime.now().subtract(const Duration(days: 365)),lastDay:? DateTime.now(),calendarBuilders: CalendarBuilders(markerBuilder: (context, day, events) {bool isMarker = false;for(int i in entries){if(day.day == i){isMarker = true;break;}}if(isMarker){return Positioned(right: 0,top: 0,child: Container(padding: const EdgeInsets.all(4),decoration: BoxDecoration(color: Colors.red,shape: BoxShape.circle,),));} else {return null;}}),focusedDay: _focusedDay,onDaySelected: (selectedDay, focusedDay) {setState(() {_selectedDay = selectedDay;_focusedDay = focusedDay;});},onFormatChanged: (format) {setState(() {_calendarFormat = format;});},calendarStyle: const CalendarStyle(selectedDecoration: BoxDecoration(color: Colors.blue,shape: BoxShape.circle,),todayDecoration: BoxDecoration(color: Color(0xFFBBDEFB),shape: BoxShape.circle,),markersMaxCount: 1,isTodayHighlighted: false,),headerStyle: const HeaderStyle(titleCentered: true,formatButtonVisible: false,),
)

3.效果圖