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);
}
}
|
