skip to Main Content

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


  1. 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

    Login or Signup to reply.
  2. This question was already answered.

    see more

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search