0

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:

enter image description here

2 question:

  1. How do i make it look like a continuous range on the calendar without skipped dates
  2. Allow the user to click on a date and add a fix number of dates to that clicked date
Amey
  • 8,470
  • 9
  • 44
  • 63

0 Answers0