We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the appointments using custom builder in the Flutter Calendar

In the Flutter Event Calendar, you can add the custom builder for appointments by using the appointmentBuilder property of the calendar.

STEP 1: You can use any widget for appointment builder. Here we are using Text and Icon widget for customization.

Widget appointmentBuilder(BuildContext context,
    CalendarAppointmentDetails calendarAppointmentDetails) {
  final Appointment appointment =
  return Column(
    children: [
          width: calendarAppointmentDetails.bounds.width,
          height: calendarAppointmentDetails.bounds.height / 2,
          color: appointment.color,
          child: Center(
            child: Icon(
              color: Colors.black,
        width: calendarAppointmentDetails.bounds.width,
        height: calendarAppointmentDetails.bounds.height / 2,
        color: appointment.color,
        child: Text(
          appointment.subject +
              DateFormat(' (hh:mm a').format(appointment.startTime) +
              '-' +
              DateFormat('hh:mm a)').format(appointment.endTime),
          textAlign: TextAlign.center,style: TextStyle(fontSize: 10),


STEP 2: Assign that widget to the appointmentBuilder property of the calendar.

  child: SfCalendar(
  view: CalendarView.week,
  allowedViews: <CalendarView>[
  dataSource: _getCalendarDataSource(),
  monthViewSettings: MonthViewSettings(showAgenda: true),
      TimeSlotViewSettings(timelineAppointmentHeight: 100),
  appointmentBuilder: appointmentBuilder,

View sample in GitHub

Flutter Calendar builder


You must log in to leave a comment
Ardit Neziri
May 23, 2022

I don't understand why for each appointment I get the all the details instead of getting only one appointment at the time. The appointment builder doesn't even give an index of the current appointment and this makes it completely useless.

Indumathi Ravichandran [Syncfusion]
May 24, 2022

Hi Ardit,

As per the current implementation of the calendar, appointmentBuilder callback was triggered once and based on the appointment details you can customize an appointment based on the Subject, StartTime, EndTime. If possible, can you please share your requirement details clearly with illustration image, it would be helpful for us to analyze and provide you a solution at the earliest.

Regards, Indumathi R

Indumathi Ravichandran [Syncfusion]
May 24, 2022

Hi Ardit,

Please ignore the previous update.

appointenter link description herementBuilder is used to design your own custom widget for normal appointments, allday and month cell appointments. In allday and month cell appointments we can show the limited appointments in UI and remaining appointments are shown in show more UI. Also, appointmentbuilder is used for generating more appointment UI, in those cases only appointment count is more than 1. So, builder holds the list of appointments for that widget generation otherwise we hold the single appointment.

We have mentioned in our pub documentation also. Please find the documentation from the following link.

Link: https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails/appointments.html

Also please find the API documentation for isMoreAppointmentregion.

Link: https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails/isMoreAppointmentRegion.html

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile