Below is the code for table calendar widget:
TableCalendar(
firstDay: DateTime.now(),
lastDay: DateTime.now().add(const Duration(days: 365)),
focusedDay: calendarController.selectedDate.value,
selectedDayPredicate: (day) {
return isSameDay(calendarController.selectedDate.value, day);
},
onDaySelected: calendarController.onDaySelected,
rangeStartDay: DateTime.now().add(const Duration(days: 6)),
rangeEndDay: DateTime.now().add(const Duration(days: 9)),
rangeSelectionMode: RangeSelectionMode.toggledOn,
calendarFormat: CalendarFormat.month,
eventLoader: (date) =>
calendarController.getEventsForDate(date),
calendarStyle: const CalendarStyle(
todayDecoration: BoxDecoration(
// color: Colors.blueAccent,
shape: BoxShape.circle,
),
selectedDecoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
),
daysOfWeekStyle: const DaysOfWeekStyle(
// weekendStyle: TextStyle(color: Colors.red),
),
),
and here is the code for the controller
class CalendarController extends GetxController {
Rx<DateTime> selectedDate = DateTime.now().obs;
int highlightDays = 7;
void onDaySelected(DateTime selectedDate, DateTime focusedDay) {
this.selectedDate.value = selectedDate;
update();
}
List<String> getEventsForDate(DateTime date) {
return ["A", "B"];
}
}
for some odd reason the table displays the highlighted date range in a distorted fashion. Always skips the first date after the range start date and then selects a single day after the last range date.
Here is how it looks:
2 question:
- How do i make it look like a continuous range on the calendar without skipped dates
- Allow the user to click on a date and add a fix number of dates to that clicked date