TableCalendar仅选中日期显示事件圆点问题求助

问题场景 #

我实现了TableCalendar<Task>组件，代码如下：

TableCalendar<Task>(
  onDaySelected: (date, date2) {
    onDateChanged!(date2);
  },
  selectedDayPredicate: (day) => isSameDay(dateSelected, day),
  calendarStyle: const CalendarStyle(
    markersAlignment: Alignment.bottomRight,
  ),
  eventLoader: (day) => _getEventsForDay(day),
  headerStyle: const HeaderStyle(
    formatButtonVisible: false,
  ),
  calendarFormat: CalendarFormat.month,
  currentDay: dateSelected,
  focusedDay: dateSelected,
  startingDayOfWeek: StartingDayOfWeek.monday,
  firstDay: DateTime.utc(2010, 10, 16),
  lastDay: DateTime.now().add(const Duration(days: 1000)),
),

事件加载方法：

List<Task> _getEventsForDay(DateTime day) {
  return allEvents.where((element) => DateTime(day.year, day.month, day.day).isSameDate(element.nextScheduledAt)).toList();
}

目前只有选中的日期才会显示事件圆点，需求是所有存在事件的日期无论是否选中都显示圆点。

修复步骤 #

1. 调整CalendarStyle配置
   默认情况下，TableCalendar对未选中日期的事件标记做了隐藏处理，需要显式配置标记样式：

calendarStyle: CalendarStyle(
  markersAlignment: Alignment.bottomRight,
  // 配置所有日期的事件标记样式
  markerDecoration: const BoxDecoration(
    color: Colors.blue, // 自定义标记颜色
    shape: BoxShape.circle,
    size: Size(4, 4), // 标记大小，按需调整
  ),
  // 可选：如果需要显示当月外有事件的日期标记
  outsideDaysVisible: true,
  // 可选：保持选中日期的样式区分度
  selectedDecoration: const BoxDecoration(
    color: Colors.blueAccent,
    shape: BoxShape.circle,
  ),
),

2. 校验日期比较逻辑
   确保isSameDate方法正确忽略时分秒，只比较年月日：

// 建议添加DateTime扩展方法来统一日期比较逻辑
extension DateCompare on DateTime {
  bool isSameDate(DateTime other) {
    return year == other.year && month == other.month && day == other.day;
  }
}

3. 确认focusedDay更新逻辑
   切换月份时，确保focusedDay同步更新为当前月份的日期，这样组件会重新加载对应月份的事件数据，避免标记不刷新：

// 监听月份切换，更新focusedDay
onPageChanged: (focusedDay) {
  setState(() {
    this.focusedDay = focusedDay;
  });
},

内容的提问来源于stack exchange，提问作者chujudzvin