[syncfusion_flutter_calendar] Allow appointment text to wrap into 2 lines (or multi-line) inside Month view cell using monthCellBuilder

[kingvhit]

Use case

Currently, in the Month View of syncfusion_flutter_calendar, appointment text is truncated with ellipsis (e.g., “Happy…”). This causes short but meaningful reminders such as “Happy birthday” to lose important context.

Many calendar apps (e.g., Samsung Calendar, Google Calendar) provide a cleaner UI by allowing appointment text to wrap into two lines or display more characters so the user can understand the reminder at a glance.

Even when using monthCellBuilder, appointment widgets still get forced into a single line due to internal layout constraints.

Proposal

Please add support to:

1. Enable multi-line text for appointments in Month View

Allow appointment text to wrap to at least 2 lines (customizable).

Allow developers to set:

• maxLines
• overflow
• softWrap
• custom text styles

2. Unrestrict height inside Month Cell for appointments

Currently, month cells clip appointment widgets, preventing proper multi-line layout.
A more flexible height model (or explicit flag like allowTextWrapInMonthView: true) would solve this.

3. Improve builder flexibility

When using monthCellBuilder, allow developers to fully override:

• appointment tile height
• text layout
• padding / spacing

[Harsha-SF4223]

Hi @kingvhit,

Thank you for reaching out.

To enable multi-line text for appointments in the Month View, you can use the appointmentBuilder property in SfCalendar. This builder allows you to create a custom widget for each appointments based on your requirements.

To wrap text inside each appointment, simply use a Text widget as the child and enable the softWrap property to support multi-line text wrapping.

SfCalendar(
  view: CalendarView.month,
  dataSource: MeetingDataSource(_getDataSource()),
  monthViewSettings: const MonthViewSettings(
    appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
  ),
  appointmentBuilder: (BuildContext context, CalendarAppointmentDetails details) {
    final Meeting meeting = details.appointments.first as Meeting;
    return Container(
      decoration: BoxDecoration(
        color: meeting.background.withOpacity(0.2),
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: meeting.background, width: 1.5),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
      child: Text(
        meeting.eventName,
        style: const TextStyle(
          color: Colors.black,
          fontSize: 11,
          fontWeight: FontWeight.w600,
          height: 1.3, // Line spacing.
        ),
        softWrap: true, // Enable wrapping.
        overflow: TextOverflow.visible, // Allow text visibility.
        maxLines: 2, // Limit to 2 lines (or use null for unlimited).
      ),
    );
  },
)

We’ve shared the documentation below for your reference on appointment customization.
UG: Builders in the Flutter Event Calendar widget | Syncfusion
KB: How to customize appointments using custom builder in the Flutter Calendar?

Please feel free to reach out if you need any further assistance.

Regards,
Harsha

[kingvhit]

@Harsha-SF4223 Hello Harsha, thank you for your explain.
However, if we override appointmentBuilder the default of appointmentBuilder will be broken. I mean, we must to handle the appointmentBuilder from scratch and we will loose all current implementation

I can see appointmentTextStyle option.

Why don't we push the simple version than customize based on appointmentBuilder

                  appointmentTextStyle: defaultFontTextStyle().copyWith(
                    color: Colors.white,
                    overflow: TextOverflow.clip,
                    fontSize: -1,
                            softWrap: true,
maxLines: 2,
                    fontWeight: FontWeight.w400,
                  ),

[kingvhit]

Hello, I think this topic here also same sitution with me.
https://www.syncfusion.com/forums/184498/calendarview-month-custom-height-for-appointment?reply=z2jxgp

[Harsha-SF4223]

Hi @kingvhit,

You can use the appointmentTextStyle property of the SfCalendar widget to customize the appearance of the appointment text, such as changing its font size, color, or weight. However, this property does not allow wrapping the text into multiple lines when the appointment has limited space. The overflow property in TextStyle only provides options like clip, fade, ellipsis, or visible for handling overflow, but it does not support text wrapping.

To wrap the appointment text into the next line, you can use the appointmentBuilder property of the SfCalendar and it is the current behavior. This property allows you to create a custom widget for rendering appointments. By using a Text widget with the softWrap property enabled inside the appointmentBuilder, you can achieve text wrapping as desired.

Here’s the key point:

• appointmentTextStyle → Controls text styling only (no wrapping).
• appointmentBuilder → Enables full customization, including text wrapping.

We have already shared the documentation regarding appointment customizations for your reference and if you have further queries, please get back to us.

Regards,
Harsha.

[kingvhit]

@Harsha-SF4223
I understand that we can useappointmentTextStyle to style the appointment text, but it doesn’t support text wrapping. I also know that usingappointmentBuilder can solve this issue. However, when we customize using appointmentBuilder, we lose several built-in benefits. For example:

• For all-day events that span multiple days (e.g., New Year Holiday from Jan 1 to Jan 4), the range isn’t displayed correctly when using a custom appointmentBuilder.
• We need to fully understand every impact and behavior of appointments when overriding appointmentBuilder.

These limitations are a major concern for me. I’ve tried customizing with appointmentBuilder, and I’m running into the issues mentioned above.

For simple customization like text wrapping, modifying the behavior behind appointmentTextStyle would be more convenient.

I just want to raise this ticket for discussion. Everything here is clear, and I’m not asking your team to commit to any changes.

Thank you again for your support.

[Harsha-SF4223]

Hi kingvhit,

Thank you for sharing your concerns and highlighting the limitations of using appointmentBuilder. We completely understand your point about losing built-in behaviors, such as multi-day event rendering, when customizing appointments.

Currently, the Flutter Calendar does not provide built-in text wrapping support for appointment text in the Month View. We’ve logged this as a feature request, and you can track its progress here:

Feedback Link: Provide built-in text wrapping support for appointments in Flutter Calendar in Flutter | Feedback Portal

Until this feature is implemented, the recommended approach is to use the appointmentBuilder property to create a custom widget for appointments. This allows you to enable multi-line text wrapping using a Text widget with softWrap: true. While this does require customization, it is currently the best way to achieve the desired behavior.

We truly appreciate your feedback it helps us improve the product for all users. Please feel free to share any additional scenarios or requirements that could help us refine this enhancement.
Thank you for your patience and support!

Regards,
Harsha.