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, )),
|
