How to load the google calendar events to the Flutter Calendar (SfCalendar) in iOS
In the Flutter Event Calendar, load the google calendar events to the Flutter calendar in iOS platform.
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 project in firebase and configure the created sample to the firebase project. Kindly refer the following link.
https://firebase.google.com/docs/flutter/setup?platform=android#create-firebase-project
STEP 3: As per the steps in the above link configure the firebase with the created sample and 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 the Firebase project, add the Project name and the Support email. Then Enable the Google Sign in and click Save in the Authentication tab.
|
STEP 4: Import the Firebase package and add the following lines in the AppDelegate.
|
STEP 5: Add the following lines in the Podfile.
|
STEP 6: Open the Runner folder in XCode of the project then 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 async method named as getGoogleEventsData() and get 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: Using the FutureBuilder widget, 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(),
)
],
));
},
),
|
