How to add a custom appointments or objects in the Flutter Calendar?
In the Flutter Event Calendar, you can add the business objects to the calendar. Also, you can get the custom appointment details using the onTap callback.
Id
Id can be set to all the appointment types where the internally created occurrence appointment will have the same id value as the pattern appointment. The exception appointment should have a different id value compared to the pattern appointment. But the recurrenceId of the exception appointment and the id value of the pattern appointment should be the same.
recurrenceId
The recurrenceId of the exception appointment and the id of the pattern appointment should be the same. The recurrenceId should be specified only for exception appointments. It is not required for occurrence and normal appointments.
STEP 1: For adding custom appointments, create custom class Meeting with required fields. We must required two mandatory DateTime fields for events start and end time.
class Meeting {
Meeting(
{required this.from,
required this.to,
this.id,
this.recurrenceId,
this.eventName = '',
this.isAllDay = false,
this.background,
this.exceptionDates,
this.recurrenceRule});
DateTime from;
DateTime to;
Object? id;
Object? recurrenceId;
String eventName;
bool isAllDay;
Color? background;
String? fromZone;
String? toZone;
String? recurrenceRule;
List<DateTime>? exceptionDates;
}
STEP 2: Then, you can schedule an appointment for a day using the properties of Meeting class.
body: SafeArea(child: SfCalendar( view: CalendarView.week, monthViewSettings: MonthViewSettings(showAgenda: true), dataSource: _dataSource, onTap: calendarTapped, ),
STEP 3: Show the tapped appointment details (includes id, recurrenceId) in alert dialog window.
child: SfCalendar(
view: CalendarView.week,
dataSource: _dataSource,
onTap: calendarTapped,
),
void calendarTapped(CalendarTapDetails details) {
if (details.targetElement == CalendarElement.appointment ||
details.targetElement == CalendarElement.agenda) {
final Meeting _meeting = details.appointments![0];
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Container(child: new Text('Appointment details')),
content: Text(_meeting.eventName +
"\nId: " +
_meeting.id.toString() +
"\nRecurrenceId: " +
_meeting.recurrenceId.toString()),
actions: <Widget>[
new TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text('close'))
],
);
});
}
}
STEP 4: Then, map the Meeting class properties to calendar by using the override method properties of CalendarDataSource. By using the convertAppointmentToObject() override method you can get the event data in custom business object type.
class MeetingDataSource extends CalendarDataSource<Meeting> {
MeetingDataSource(List<Meeting> source) {
appointments = source;
}
@override
DateTime getStartTime(int index) {
return appointments![index].from;
}
@override
DateTime getEndTime(int index) {
return appointments![index].to;
}
@override
Object? getId(int index) {
return appointments![index].id;
}
@override
Object? getRecurrenceId(int index) {
return appointments![index].recurrenceId as Object?;
}
@override
Color getColor(int index) {
return appointments![index].background as Color;
}
@override
List<DateTime>? getRecurrenceExceptionDates(int index) {
return appointments![index].exceptionDates as List<DateTime>?;
}
@override
String? getRecurrenceRule(int index) {
return appointments![index].recurrenceRule;
}
@override
String getSubject(int index) {
return appointments![index].eventName as String;
}
@override
bool isAllDay(int index) {
return appointments![index].isAllDay as bool;
}
@override
Meeting? convertAppointmentToObject(
Meeting? customData, Appointment appointment) {
// TODO: implement convertAppointmentToObject
return Meeting(
from: appointment.startTime,
to: appointment.endTime,
eventName: appointment.subject,
background: appointment.color,
isAllDay: appointment.isAllDay,
id: appointment.id,
recurrenceRule: appointment.recurrenceRule,
recurrenceId: appointment.recurrenceId,
exceptionDates: appointment.recurrenceExceptionDates);
}
}
|
Conclusion
I hope you enjoyed learning about how to add a custom appointments or objects in the Flutter Calendar.
You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
