We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add google calendar events to the Flutter event calendar (SfCalendar)

Platform: Flutter |
Control: SfCalendar |
Published Date: November 27, 2020 |
Last Revised Date: November 27, 2020

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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon