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.效果图
