You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在syncfusion_flutter_calendar日程视图中设置24小时制时间格式

解决Syncfusion Flutter Calendar月视图Agenda部分24小时制时间显示问题

要修改月视图中Agenda区域的时间格式为24小时制,timeSlotViewSettings仅对时间槽视图生效,无法影响Agenda部分。可以通过以下两种方式实现:

方法一:自定义Agenda项构建器(推荐,完全可控)

使用agendaItemBuilder手动构建每个日程项,直接格式化时间为HH:mm格式。需要先导入intl包(若未添加,在pubspec.yaml中添加intl: ^0.18.1并执行flutter pub get)。

示例代码:

import 'package:intl/intl.dart';
// ...
SfCalendar(
  view: CalendarView.month,
  timeSlotViewSettings: TimeSlotViewSettings(
    timeFormat: 'HH:mm',
  ),
  dataSource: _calendarDataSource, // 你的日程数据源
  // 自定义Agenda项
  agendaItemBuilder: (BuildContext context, AgendaDetails details) {
    final Appointment appointment = details.appointments.first;
    // 格式化开始/结束时间为24小时制
    final startTimeStr = DateFormat('HH:mm').format(appointment.startTime);
    final endTimeStr = DateFormat('HH:mm').format(appointment.endTime);

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          // 显示日程标题
          Text(
            appointment.subject,
            style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14),
          ),
          const SizedBox(height: 4),
          // 显示24小时制时间
          Text(
            '$startTimeStr - $endTimeStr',
            style: TextStyle(color: Colors.grey[600], fontSize: 12),
          ),
          // 可添加其他日程信息,如地点、描述等
          if (appointment.location != null && appointment.location!.isNotEmpty)
            Text(
              appointment.location!,
              style: TextStyle(color: Colors.grey[600], fontSize: 12),
            ),
        ],
      ),
    );
  },
)

方法二:设置Locale强制24小时制

如果你的应用目标区域默认使用24小时制(如中文、欧洲多数国家),可以直接设置Calendar的locale属性,让Agenda自动采用24小时格式:

SfCalendar(
  locale: 'zh_CN', // 中文区域默认24小时制
  view: CalendarView.month,
  timeSlotViewSettings: TimeSlotViewSettings(
    timeFormat: 'HH:mm',
  ),
  dataSource: _calendarDataSource,
)

注意:这种方式依赖系统区域设置逻辑,若用户设备区域为12小时制(如美国),该方法可能不生效,因此更推荐方法一。

内容的提问来源于stack exchange,提问作者mvasco

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 22:30:07