Overview

During this webinar, we covered how to use the importing feature to add appointments from Google Sheets and Firebase to the Syncfusion Flutter Calendar widget in your application.

Agenda

  • What’s new in the 2021 Volume 2 release for Flutter.
  • How to create a Google Sheet with appointment data.
  • Connecting Google Sheets to the Syncfusion Calendar and displaying those appointments.
  • Create a Firebase project and add those appointments to Firestore database using Syncfusion Calendar.

Creating a Google Sheet 

  • Step 1: Create a new Google spreadsheet.
  • Step 2: Then, add the required data in the Google spreadsheet.
  • Step 3: Now, open the Google AppScript for corresponding spreadsheet data, and add the doGet() method.

function doGet(request) {
  var sheet=SpreadsheetApp.openById("1k0Mc3AAUqQqEA0yV6J5EKq4A04TMfVy_ZfIyefCTrQw");
  var values= sheet.getActiveSheet().getDataRange().getValues();
  var data=[];
  for(var i=0;i<values.length; i++)
  {
    var row=values[i];
    var appointmentData={};
    appointmentData['subject']=row[0];
    appointmentData['starttime']=row[1];
    appointmentData['endtime']=row[2];
    data.push(appointmentData);
    
  }

  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON);
  
}

  • Step 4:Then, deploy the AppScript using Deploy as the web option, and get the URL.
  • Step 5: Add the HTTP package in the Pubspec.yaml.
  • Step 6: To get the data from the AppScript API link, create the async method getDataFromGoogleSheet() and get the data from the URL using the http.get() method.
Future<List<Meeting>> getDataFromGoogleSheet() async {
  Response data = await http.get(
    Uri.parse(
        "https://script.google.com/macros/s/AKfycbwG-W8x3ojt3-h5F-2IsmfdfTTdGo-bJiYF9gtBfC80KWNc7Qfv3DlApShRwYanHZia4A/exec"),
  );
  dynamic jsonAppData = convert.jsonDecode(data.body);
  final List appointmentData = [];
  final Random random = new Random();
  for (dynamic data in jsonAppData) {
    Meeting meetingData = Meeting(
      eventName: data['subject'],
      from: _convertDateFromString(data['starttime']),
      to: _convertDateFromString(data['endtime']),
      background: _colorCollection[random.nextInt(9)],
    );
    appointmentData.add(meetingData);
  }
  return appointmentData;
}

How to create a Firestore database

If you haven’t already, create a Firebase project. In the Firebase console, click Add project, then follow the on-screen instructions to create a Firebase project or add Firebase services to an existing GCP project.

Navigate to the Cloud Firestore section of the Firebase console. You’ll be prompted to select an existing Firebase project. Follow the database creation workflow.

Registering Firestore project with the Flutter app

In the center of the Firebase console’s project overview page, click the Android icon (plat_android) to launch the setup workflow.

If you’ve already added an app to your Firebase project, click Add app to display the platform options.

Enter your app’s package name in the Android package name field.

Click Register app.

Add the required package in the Pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_calendar: 19.2.44
  http: ^0.13.3
  firebase_core: ^1.1.1
  cloud_firestore: ^2.1.0

Supported platforms

Android

  • Device types:
    • Phone, tablet
  • Supported versions:
    • API level 16 and later versions

iOS

  • Device types:
    • iPhone, iPod, iPad
  • Supported versions:
    • iOS 8 and later versions

Web

  • Device types:
    • All major browsers

Desktop

  • Device types:
    • Windows, macOS, Linux

Resources

Overview of license

You should pass your key to the registerLicense method in the main method of your project.

Summary

During this webinar, we looked into how to add appointments from Google Sheets and Firebase to the Syncfusion Flutter Calendar widget in your application. We also reviewed how the new updates from 2021 Volume 2 can assist in your mobile development.

We hope you enjoyed this webinar and please keep an eye out for our future Flutter webinars.

Getting started

Packages available in pub.dev

  • In pub.dev site, search Syncfusion and you will see all the packages.

Syncfusion Flutter