Articles in this section
Category / Section

How to add a custom appointments or objects in the Flutter Calendar

2 mins read

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 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.



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 {
      {required this.from,
      this.eventName = '',
      this.isAllDay = false,
  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];
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Container(child: new Text('Appointment details')),
            content: Text(_meeting.eventName +
                "\nId: " +
                "\nRecurrenceId: " +
            actions: <Widget>[
              new TextButton(
                  onPressed: () {
                  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;
  DateTime getStartTime(int index) {
    return appointments![index].from;
  DateTime getEndTime(int index) {
    return appointments![index].to;
  Object? getId(int index) {
    return appointments![index].id;
  Object? getRecurrenceId(int index) {
    return appointments![index].recurrenceId as Object?;
  Color getColor(int index) {
    return appointments![index].background as Color;
  List<DateTime>? getRecurrenceExceptionDates(int index) {
    return appointments![index].exceptionDates as List<DateTime>?;
  String? getRecurrenceRule(int index) {
    return appointments![index].recurrenceRule;
  String getSubject(int index) {
    return appointments![index].eventName as String;
  bool isAllDay(int index) {
    return appointments![index].isAllDay as bool;
  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,
        recurrenceRule: appointment.recurrenceRule,
        recurrenceId: appointment.recurrenceId,
        exceptionDates: appointment.recurrenceExceptionDates);

View sample in Github.

Flutter Calendar Custom appointment details



Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment