Articles in this section
Category / Section

How to add google calendar events to the Flutter event calendar?

2 mins read

In the Flutter event calendar, you can load the google events to Syncfusion Flutter calendar by using OAuth Client ID.

STEP 1: Add the required packages in the dependencies of Pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_calendar: ^18.3.40
  intl: ^0.16.0
  google_sign_in: ^4.4.6
  googleapis_auth: ^0.2.11+1
  googleapis: ^0.54.0
  cupertino_icons: ^0.1.2

STEP 2: Create a sample and install the above packages in the sample. Now, need to get the SHA_1 key from Android Studio. Open the android project of the created sample in new window.  Please refer the following link for SHA-1 key generation from Android Studio.

Please find the image for the same and copy the SHA-1 Key value.

signing report

 

STEP 3: Create a project in below google developers console link.

credential

 

STEP 4: In Dashboard tab click “Enable APIS and services” and enable calendar API’s.

enable API

 

STEP 5: In Credential tab click the “Create Credential” option and click “OAuth client ID” option from the list.

credential

 

STEP 6: Then specify the Application type, Package name, SHA-1 key (already copied from sample) value and create a project.

Application type: Android

Package name: Should be in AndroidManifest.xml file of the sample.

 

packagename

 

 

STEP 7: Call the GoogleSignIn method to authenticate Google users.

final GoogleSignIn _googleSignIn = GoogleSignIn(
  clientId:
      'OAuth Client ID',
  scopes: <String>[
    googleAPI.CalendarApi.CalendarScope,
  ],
);

STEP 8: Google provides googleAPI.Event class which holds the details about the google events and use these API’s in override methods.

 

class GoogleDataSource extends CalendarDataSource {
  GoogleDataSource({List<googleAPI.Event> events}) {
    this.appointments = events;
  }
 
  @override
  DateTime getStartTime(int index) {
    final googleAPI.Event event = appointments[index];
    return event.start.date ?? event.start.dateTime.toLocal();
  }
 
  @override
  bool isAllDay(int index) {
    return appointments[index].start.date != null;
  }
 
  @override
  DateTime getEndTime(int index) {
    final googleAPI.Event event = appointments[index];
    return event.endTimeUnspecified != null && event.endTimeUnspecified
        ? (event.start.date ?? event.start.dateTime.toLocal())
        : (event.end.date != null
            ? event.end.date.add(Duration(days: -1))
            : event.end.dateTime.toLocal());
  }
 
  @override
  String getLocation(int index) {
    return appointments[index].location;
  }
 
  @override
  String getNotes(int index) {
    return appointments[index].description;
  }
 
  @override
  String getSubject(int index) {
    final googleAPI.Event event = appointments[index];
    return event.summary == null || event.summary.isEmpty
        ? 'No Title'
        : event.summary;
  }
}

STEP 9: To load the google events, create async method named as getGoogleEventsData() and get the data from google calendar using googleAPI.Event. Please find the following code snippet for the same.

Future<List<googleAPI.Event>> getGoogleEventsData() async {
  final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
  final GoogleAPIClient httpClient =
      GoogleAPIClient(await googleUser.authHeaders);
  final googleAPI.CalendarApi calendarAPI = googleAPI.CalendarApi(httpClient);
  final googleAPI.Events calEvents = await calendarAPI.events.list(
    "primary",
  );
  Final List<googleAPI.Event> appointments = <googleAPI.Event>[];
  if (calEvents != null && calEvents.items != null) {
    for (int i = 0; i < calEvents.items.length; i++) {
      final googleAPI.Event event = calEvents.items[i];
      if (event.start == null) {
        continue;
      }
      appointments.add(event);
    }
  }
  return appointments;
}

STEP 10: Using the FutureBuilder widget, you can display the google calendar data. Based on the Snapshot.data, you can load that google calendar events to the Flutter calendar.

child: FutureBuilder(
  future: getGoogleEventsData(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    return Container(
        child: Stack(
      children: [
        Container(
          child: SfCalendar(
            view: CalendarView.month,
            dataSource: GoogleDataSource(events: snapshot.data),
            monthViewSettings: MonthViewSettings(
                appointmentDisplayMode:
                    MonthAppointmentDisplayMode.appointment),
          ),
        ),
        snapshot.data != null
            ? Container()
            : Center(
                child: CircularProgressIndicator(),
              )
      ],
    ));
  },
),

View sample in GitHub

google calendar events

 





Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied