TableCalendar(
calendarFormat: CalendarFormat.month,
daysOfWeekHeight: 20,
daysOfWeekStyle: DaysOfWeekStyle(
weekdayStyle: TextStyle().copyWith(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
decoration: BoxDecoration(
color: lightColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
),
headerStyle: HeaderStyle(
decoration: BoxDecoration(),
titleCentered: true,
formatButtonVisible: false,
leftChevronIcon: Icon(
Icons.keyboard_arrow_left,
color: buttoncolor,
),
rightChevronIcon: Icon(
Icons.keyboard_arrow_right,
color: buttoncolor,
),
titleTextStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
)),
calendarStyle: CalendarStyle(
markerSize: 40,
outsideDaysVisible: false,
todayTextStyle: TextStyle(color: Colors.black),
todayDecoration: BoxDecoration(
color: AppColor.transparent,
shape: BoxShape.circle),
selectedDecoration: BoxDecoration(
color: AppColor.orange,
border: Border.all(
color: AppColor.orange,
width: 1,
strokeAlign:
BorderSide.strokeAlignOutside,
),
shape: BoxShape.circle,
),
),
rowHeight: 35,
firstDay: DateTime.now().subtract(Duration(days: 60)),
lastDay: DateTime.now(),
focusedDay: _currentDate,
onDaySelected: (selectedDay, focusedDay) {
if (!isSameDay(_selectedDate, selectedDay)) {
setState(() {
_selectedDate = selectedDay;
_currentDate = focusedDay;
controller.seeAttendance(
context: context,
selectedDate: _selectedDate);
});
}
},
holidayPredicate: (day) {
/// Check if the current day is a holiday
String formattedDay = "${day.year}-${day.month.toString().padLeft(2, ‘0’)}-${day.day.toString().padLeft(2, ‘0’)}";
return controller.fetchMonthAttendance.contains(formattedDay);
},
calendarBuilders: CalendarBuilders(
defaultBuilder: (context, day, focusedDay) {
List datesAsDateTime = controller.fetchMonthAttendance.map((dateString) => DateTime.parse(dateString)).toList();
for (DateTime d in datesAsDateTime) {
if (day.day == d.day &&
day.month == d.month &&
day.year == d.year) {
return Container(
decoration: const BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: Center(
child: Text(
‘${day.day}’,
style: const TextStyle(color: Colors.white),
),
),
);
}
}
return null;
},
),
selectedDayPredicate: (day) {
return isSameDay(_selectedDate, day);
},
onFormatChanged: (format) {
if (_calendarFormat != format) {
setState(() {
_calendarFormat = format;
});
}
},
onPageChanged: (focusedDay) {
_currentDate = focusedDay;
},
),
2
Answers
By using flutter built in I thinks its a difficult task. However I can suggest to use the syncfusion calendar. It has many flexibilities avaialble
https://pub.dev/packages/syncfusion_flutter_calendar
This question was already answered.
see more