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  to leave a comment
Access denied
Access denied