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

如何在Syncfusion Flutter Calendar月视图中显示每日超过3个预约?

Syncfusion Flutter Calendar月视图显示全部预约的解决方案

方法一:通过配置属性直接取消数量限制

Syncfusion Calendar提供了现成属性控制月视图每日显示的预约数量,无需自定义单元格。只需在monthViewSettings中设置appointmentDisplayCount为0即可——0表示显示当前日期的所有预约,日历会自动调整单元格高度适配内容,不会出现“更多”指示器。

修改后的代码示例:

SfCalendar(
  view: CalendarView.month,
  dataSource: MeetingDataSource(_getDataSource()),
  monthViewSettings: MonthViewSettings(
    appointmentDisplayCount: 0, // 设为0显示所有预约
  ),
)

方法二:自定义monthCellBuilder(适合个性化样式需求)

如果需要对预约显示样式做更多定制,可使用monthCellBuilder手动渲染每个日期的所有预约。通过MonthCellDetails获取当前日期的全部预约列表,逐个渲染即可。

代码示例:

SfCalendar(
  view: CalendarView.month,
  dataSource: MeetingDataSource(_getDataSource()),
  monthCellBuilder: (BuildContext context, MonthCellDetails details) {
    // 获取当前单元格日期对应的所有预约
    final List<Appointment> appointments = details.appointments ?? [];
    
    return Container(
      padding: const EdgeInsets.all(4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: appointments.map((appointment) {
          return Container(
            margin: const EdgeInsets.only(bottom: 2),
            padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
            decoration: BoxDecoration(
              color: appointment.color,
              borderRadius: BorderRadius.circular(4),
            ),
            child: Text(
              appointment.subject,
              style: const TextStyle(color: Colors.white, fontSize: 10),
              overflow: TextOverflow.ellipsis,
            ),
          );
        }).toList(),
      ),
    );
  },
)

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.06.13 17:44:57