appointmentBuilder property

CalendarAppointmentBuilder? appointmentBuilder

A builder that builds a widget, replaces the appointment view in a day, week, workweek, month, schedule and timeline day, week, workweek, month views.

Note: In month view, this builder callback will be used to build appointment views for appointments displayed in both month cell and agenda views when the MonthViewSettings.appointmentDisplayMode is set to appointment.

See also:

• CalendarDataSource, to set and handle the appointments in the calendar
• Appointment, to know more about the appointment and it's properties in calendar.
• appointmentTextStyle, to customize the appointment text, when the builder not added.
• Knowledge base: How to customize appointment using builder

CalendarController _controller = CalendarController();

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfCalendar(
         view: CalendarView.day,
         controller: _controller,
         appointmentBuilder: (BuildContext context,
             CalendarAppointmentDetails calendarAppointmentDetails) {
           if (calendarAppointmentDetails.isMoreAppointmentRegion) {
             return Container(
               width: calendarAppointmentDetails.bounds.width,
               height: calendarAppointmentDetails.bounds.height,
               child: Text('+More'),
             );
           } else if (_controller.view == CalendarView.month) {
             final Appointment appointment =
                 calendarAppointmentDetails.appointments.first;
             return Container(
                 decoration: BoxDecoration(
                     color: appointment.color,
                     shape: BoxShape.rectangle,
                     borderRadius: BorderRadius.all(Radius.circular(4.0)),
                     gradient: LinearGradient(
                         colors: [Colors.red, Colors.cyan],
                         begin: Alignment.centerRight,
                         end: Alignment.centerLeft)),
                 alignment: Alignment.center,
                 child: appointment.isAllDay
                     ? Text('${appointment.subject}',
                         textAlign: TextAlign.left,
                         style: TextStyle(
                         color: Colors.white, fontSize: 10))
                     : Column(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: [
                           Text('${appointment.subject}',
                               textAlign: TextAlign.left,
                               style: TextStyle(
                                   color: Colors.white, fontSize: 10)),
                           Text(
                               '${DateFormat('hh:mm a').
                                  format(appointment.startTime)} - ' +
                                   '${DateFormat('hh:mm a').
                                      format(appointment.endTime)}',
                               textAlign: TextAlign.left,
                               style: TextStyle(
                                   color: Colors.white, fontSize: 10))
                         ],
                       ));
           } else {
             final Appointment appointment =
                 calendarAppointmentDetails.appointments.first;
             return Container(
               width: calendarAppointmentDetails.bounds.width,
               height: calendarAppointmentDetails.bounds.height,
               child: Text(appointment.subject),
             );
           }
         },
       ),
     ),
   );
 }

Implementation

final CalendarAppointmentBuilder? appointmentBuilder;