Handling Same-Time Overlapping Multiple Appointments in Flutter Calendar Day View - Branched from 197599

[Seraphina]

@ drive mad How can I handle the display of overlapping appointments in CalendarView.day? 

If multiple appointments occur at the same time, can I adjust how they are displayed to prevent them from being obscured?

[Natrayan Ramalingam]

Hi Seraphina,

In the Day View of Flutter's SfCalendar, appointments scheduled at the same time do not overlap. Instead, the calendar automatically arranges them one after another within the available space based on their start time. This ensures that all appointments remain visible and are displayed clearly without being obscured, following the component’s default rendering behavior. This layout logic is handled internally and cannot be overridden through customization. We hope this clarifies the limitation in the current behavior, and we appreciate your understanding.

For your reference, we’ve shared a demo below that shows how multiple appointments are rendered in Day View. 

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

Regards,

Natrayan

[Vuong Trung nu]

Appointments are not always scheduled at the same time and will show up hourly on the Calendar. I don't think this is a big deal. @ Racing Limits right?

[Natrayan Ramalingam]

Hi Vuong Trung nu,

As mentioned earlier, in the Day View of Flutter's SfCalendar, appointments scheduled at the same time are arranged side by side within the available space to ensure visibility and prevent overlapping.

To add further clarity — even when appointments are scheduled at different hourly time slots are also rendered one after another in the available space based on their start time. This behavior follows the component’s default rendering logic and cannot be customized.

For your reference, we’ve included a demo below that illustrates how multiple appointments across different time slots are displayed in Day View.

We appreciate you’re understanding and hope this helps clarify the behavior.

Regards,

Natrayan

[Aimes Dani]

In the built in CalendarView.day layout you can’t really change the overlap logic directly, it just stacks same time slots until they hit the min width. The usual workaround is to use appointmentBuilder and render your own layout for that time range, for example a column or list so all appointments stay visible instead of being hidden behind fnf games each other.

[Harsha Midadhala Khajareddy Midadhala]

Hi Aimes Dani,

In the CalendarView.day layout, when two or more appointments share the same time range, the calendar automatically places them side by side by dividing the available width. This ensures that there’s no appointments overlapping.

return Scaffold(

      body: SfCalendar(

        // Provide a data source with EXACTLY two overlapping appointments

        dataSource: MeetingDataSource(_getDataSource()),

        // Optional: tune visible time range for clarity

        timeSlotViewSettings: const TimeSlotViewSettings(

          startHour: 8,

          endHour: 18,

        ),

      ),

    );

  }

  List<Meeting> _getDataSource() {

    final List<Meeting> meetings = <Meeting>[];

    final DateTime today = DateTime.now();

    // Both appointments overlap from 9:00 to 11:00 so they render side-by-side

    final DateTime startTime = DateTime(today.year, today.month, today.day, 9, 0);

    final DateTime endTime = startTime.add(const Duration(hours: 2));

    meetings.add(

      Meeting('Team Sync', startTime, endTime, const Color(0xFF0F8644), false),

    );

    meetings.add(

      Meeting('Client Call', startTime, endTime, const Color(0xFF8A2BE2), false),

    );

    return meetings;

  }

Output:

If you need any further assistance, please feel free to reach out.

Regards,

Harsha.

[grinch bottle]

Using `appointmentBuilder` in SfCalendar is the most concise and correct way to display overlapping appointments without them being obscured. @Geometry Dash