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.
|
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, )),
|
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
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.
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
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