如何隐藏Flutter中SfCalendar的Today按钮或调整其位置？

一、隐藏Today按钮 #

直接在SfCalendar组件中添加showTodayButton: false属性即可，这是官方提供的配置项，无需额外自定义：

Widget buildDayViewCalendar(
    bool writePermission,
    Club? currentClub,
    DateTime selectedDate,
  ) {
    int courtLength = currentClub == null ? 0 : currentClub.courts.length;

return MouseRegionWidget(
  controller: _controller,
  child: SfCalendar(
    headerDateFormat: 'MMM d, yyyy',
    headerHeight: 230,
    viewHeaderHeight: 0,
    initialSelectedDate: selectedDate,
    initialDisplayDate: selectedDate,
    view: CalendarView.day,
    controller: _controller,
    // 添加此行隐藏Today按钮
    showTodayButton: false,
    timeSlotViewSettings: TimeSlotViewSettings(
      timeInterval: const Duration(minutes: 30),
      timeFormat: 'h:mm',
      numberOfDaysInView: min(5, courtLength),
    ),
    dataSource: _getReservationByClubId(),
    showDatePickerButton: true,
    showNavigationArrow: false,
    allowViewNavigation: true,
    allowDragAndDrop: true,
    onTap: writePermission ? _onTap : null,
    specialRegions: DateUtil().getTimeRegions(currentClub),
  ),
);
  }

二、调整Today按钮的位置 #

如果需要自定义Today按钮的位置，需通过headerBuilder属性完全自定义日历头部布局，自由控制所有头部元素的排列：

步骤1：实现自定义头部组件 #

编写自定义header widget，按需求排列日期显示、日期选择器按钮、Today按钮等元素：

Widget _customCalendarHeader(BuildContext context, CalendarHeaderDetails details) {
  return Container(
    height: 230,
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 显示当前日期
        Text(
          DateFormat('MMM d, yyyy').format(details.date),
          style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
        ),
        const SizedBox(height: 20),
        // 自定义按钮行，调整Today按钮位置
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 自定义日期选择器按钮
            IconButton(
              icon: const Icon(Icons.date_range),
              onPressed: () => _controller.displayDatePicker(),
            ),
            // Today按钮，放在右侧位置
            TextButton(
              onPressed: () {
                _controller.displayDate = DateTime.now();
                _controller.selectedDate = DateTime.now();
              },
              child: const Text('Today'),
            ),
          ],
        ),
      ],
    ),
  );
}

步骤2：在SfCalendar中使用自定义header #

修改原代码，添加headerBuilder，同时关闭默认的头部元素（避免重复显示）：

Widget buildDayViewCalendar(
    bool writePermission,
    Club? currentClub,
    DateTime selectedDate,
  ) {
    int courtLength = currentClub == null ? 0 : currentClub.courts.length;

return MouseRegionWidget(
  controller: _controller,
  child: SfCalendar(
    headerHeight: 230,
    viewHeaderHeight: 0,
    initialSelectedDate: selectedDate,
    initialDisplayDate: selectedDate,
    view: CalendarView.day,
    controller: _controller,
    // 使用自定义头部布局
    headerBuilder: _customCalendarHeader,
    // 关闭默认日期选择器按钮，自定义头部已实现
    showDatePickerButton: false,
    timeSlotViewSettings: TimeSlotViewSettings(
      timeInterval: const Duration(minutes: 30),
      timeFormat: 'h:mm',
      numberOfDaysInView: min(5, courtLength),
    ),
    dataSource: _getReservationByClubId(),
    showNavigationArrow: false,
    allowViewNavigation: true,
    allowDragAndDrop: true,
    onTap: writePermission ? _onTap : null,
    specialRegions: DateUtil().getTimeRegions(currentClub),
  ),
);
  }

说明 #

• 自定义header时，可通过Row、Column或Stack等布局组件，完全控制Today按钮的位置；
• 借助CalendarController的方法实现按钮功能，和默认行为保持一致；
• 若需保留默认样式，可参考Syncfusion官方header的实现逻辑进行微调。

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