如何在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
相关产品推荐
相关产品推荐

