Table Calendar won't change focusedDay

user_7868565 0
Viewed 2742

I'm using table_calendar package to display a calendar on a page. I want the user to be able to chose a date from the calendar, but when tapping on a date, the focusedDay won't change, so it always stays on the default focusedDay.

I tried to search the docs, and I can't figure out what is wrong, from the docs it seems like it should work fine.

This is what I have for the CalendarWidget:

TableCalendar(
                  focusedDay: _focusedDay,
                  firstDay: DateTime.now(),
                  lastDay: DateTime.utc(2030, 1, 1),
                  calendarFormat: CalendarFormat.month,
                  headerStyle: HeaderStyle(
                    formatButtonVisible: false,
                    titleCentered: true,
                    rightChevronIcon: Icon(
                      Icons.chevron_right,
                      size: 16,
                      color: Colors.grey,
                    ),
                    leftChevronIcon: Icon(
                      Icons.chevron_left,
                      size: 16,
                      color: Colors.grey,
                    ),
                  ),
                  onDaySelected: (selectedDay, focusedDay) {
                    setState(() {
                      _selectedDay = selectedDay;
                      _focusedDay = focusedDay;
                    });
                  },
                ),

This is inside a stateful widget, and I have _focusdDay as a variable in that class, which I update. The TableCalendar is of course inside the build function of that class.

flutter
2 Answers

Don't forget to define the selectedDayPredicate in your TableCalendar:

TableCalendar(
...
selectedDayPredicate: (day) =>isSameDay(day, selectedDay),
...
)

The widget will use this to find out which day is the selected day

user_145672470

Instead of Using this , You can Use DatePicker and Redesign it by Yourself

here is the Example :

  onTap: ()  async {
                                      DateTime newSelectedDate =
                                          await showDatePicker(
                                              context: context,
                                              initialDate: DateTime.now(),
                                              firstDate: DateTime.now(),
                                              lastDate: DateTime(2100),
                                              builder: (BuildContext context,
                                                  Widget child) {
                                                return Theme(
                                                  data: ThemeData.dark().copyWith(
                                                    colorScheme: ColorScheme.dark(
                                                      primary: Colors.pink,
                                                      onPrimary: Colors.white,
                                                      surface: Colors.white,
                                                      onSurface: Colors.black,
                                                    ),
                                                    dialogBackgroundColor:
                                                        Colors.grey[200],
                                                  ),
                                                  child: child,
                                                );
                                              });
    
                                      if (newSelectedDate != null) {
                                        setState(() {
                                          _selectedDate = newSelectedDate;
                                          final DateFormat formatter =
                                              DateFormat('yyyy-MM-dd');
                                          formattedSelectedDate =
                                              formatter.format(_selectedDate);
                                        });
                                      }
                                    },
user_84800690
Related