How to load the google calendar events to the Flutter Calendar (SfCalendar) in iOS
Follow these steps to integrate Google Calendar events into your Flutter Event Calendar application on iOS platform:
STEP 1: Add the following packages to the dependencies section of your 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 project in Firebase and configure your Flutter sample with the Firebase project. Kindly refer to the following link.
https://firebase.google.com/docs/flutter/setup?platform=android#create-firebase-project
STEP 3: Follow the steps in the link above to configure Firebase with your created sample. Add the iOS bundle ID (Take a bundle ID from project.pbxproj file of the Runner.xcodeproj folder in iOS project). Register the app with firebase and download the GoogleService-Info.plist.
|
STEP 4: In the Project settings of your Firebase project:
- Add the project name and support email.
- Enable Google sign-in in the Authentication tab.
- Click save to apply changes.
|
STEP 4: Import the Firebase package and add necessary configuration code in your the AppDelegate file.
|
STEP 5: Add the following lines in the Podfile.
|
STEP 6: Open the Runner folder in XCode of the project and drag-and-drop the GoogleService-Info.plist file into that folder.
|
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. 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 an async method named as getGoogleEventsData() to retrieve the data from google calendar using googleAPI.Event. 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: Use a FutureBuilder widget to display the google calendar data. Based on the Snapshot.data, 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(),
)
],
));
},
),
|
