How to add a custom appointments or objects in the Flutter Calendar?
In the Flutter Event Calendar, you can add business objects to the calendar and retrieve custom appointment details using the onTap callback.
Id
The Id property can be set for all appointment types. Internally created occurrence appointments will have the same Id value as their pattern appointment. Exception appointments should have a different Id value compared to the pattern appointment, but their recurrenceId should match the pattern appointment's Id.
recurrenceId
The recurrenceId of an exception appointment should match the Id of its pattern appointment. This property should only be specified for exception appointments and is not required for occurrence or normal appointments.
STEP 1: For adding custom appointments, create custom class Meeting with required fields. Two mandatory DateTime fields are required for the event's start and end times.
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, Use the properties of the Meeting class to schedule appointments in the calendar.
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 an 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 the calendar by overriding the methods of CalendarDataSource. Use the convertAppointmentToObject() override method to 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!
