Category / Section
How to customize the appointments using custom builder in the Flutter Calendar
1 min read
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 = calendarAppointmentDetails.appointments.first; return Column( children: [ Container( width: calendarAppointmentDetails.bounds.width, height: calendarAppointmentDetails.bounds.height / 2, color: appointment.color, child: Center( child: Icon( Icons.group, color: Colors.black, ), )), Container( 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>[ CalendarView.day, CalendarView.workWeek, CalendarView.week, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth, CalendarView.schedule ], dataSource: _getCalendarDataSource(), monthViewSettings: MonthViewSettings(showAgenda: true), timeSlotViewSettings: TimeSlotViewSettings(timelineAppointmentHeight: 100), appointmentBuilder: appointmentBuilder, )),