---
title: "Use the Flutter Calendar Widget to Add Appointments from Google Sheets and Firebase [Webinar Show Notes]"
published_at: "2021-09-14T10:00:16+00:00"
modified_at: "2026-01-30T13:40:34+00:00"
url: "https://www.syncfusion.com/blogs/post/use-the-flutter-calendar-widget-to-add-appointments-from-google-sheets-and-firebase-webinar-show-notes"
excerpt: "This blog provides show notes for our September 9 webinar, “Use the Flutter Calendar Widget to Add Appointments from Google Sheets and Firebase.” The webinar was presented and hosted by Michael Prabhu M. If you missed the webinar, or would..."
taxonomy_category:
  - "Desktop"
  - "Flutter"
  - "Mobile"
  - "Webinar"
taxonomy_post_tag:
  - "Android"
  - "Calendar"
  - "desktop"
  - "Flutter"
  - "Mobile"
---

# Use the Flutter Calendar Widget to Add Appointments from Google Sheets and Firebase [Webinar Show Notes]

[Carter Harris](https://www.syncfusion.com/blogs/author/carterh)

![Use the Flutter Calendar Widget to Add Appointments from Google Sheets and Firebase \[Webinar Show Notes\]](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Use-the-Flutter-Calendar-Widget-to-Add-Appointments-from-Google-Sheets-and-Firebase-Webinar-Show-Notes-1.png)


This blog provides show notes for our September 9 webinar, “Use the Flutter Calendar Widget to Add Appointments from Google Sheets and Firebase.” The webinar was presented and hosted by Michael Prabhu M. If you missed the webinar, or would like to watch it again, please see our [YouTube channel](https://youtu.be/xbH-jFi6TM0)
 or watch it here.

## 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](https://www.google.com/sheets/about/) .
- **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](https://console.firebase.google.com/)
, 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](https://console.firebase.google.com/project/_/firestore)
. 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](https://console.firebase.google.com/)
, 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](https://developer.android.com/studio/build/application-id)
 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**

- **Minimum Flutter SDK version**
  - V 1.7.8

- **Getting started**
  - [Syncfusion Flutter Widgets – API reference](https://help.syncfusion.com/flutter/introduction/api-reference) [Documentation]

- **Packages available in pub.dev**
  - In [pub.dev](https://pub.dev/packages) site, search **Syncfusion** and you will get all the packages.

## **Overview of license**

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

## **![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Pass-your-key-to-the-registerLicense-method-in-the-main-method-of-your-project.png)Summary**

During this webinar, we looked into how to add appointments from Google Sheets and Firebase to the Syncfusion [Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar)
 widget in your application. We also reviewed how the new updates from [2021 Volume 2](https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download)
 can assist in your mobile development.

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

## Recommended resources (related links)

### Getting started

- [Syncfusion Flutter Widgets – API reference](https://help.syncfusion.com/flutter/introduction/api-reference) [Documentation]
- [Flutter Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/flutter-succinctly) [ebook]

### Packages available in pub.dev

- In [pub.dev](https://pub.dev/packages) site, search **Syncfusion** and you will see all the packages.

### Syncfusion Flutter

- [Flutter UI widgets feature tour](https://www.syncfusion.com/flutter-widgets)

## Related blogs

- [What’s New in 2021 Volume 2: Flutter](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-2-flutter.aspx)
- [Updating Live Data in Flutter Charts – A Complete Guide](https://www.syncfusion.com/blogs/post/updating-live-data-in-flutter-charts.aspx)
- [Visualize Election Results Using the Flutter Treemap Widget](https://www.syncfusion.com/blogs/post/visualize-election-results-using-the-flutter-treemap-widget.aspx)
- [11 Tips to Improve Your Flutter Development Productivity in Android Studio](https://www.syncfusion.com/blogs/post/11-tips-to-improve-your-flutter-development-productivity-in-android-studio.aspx)