How to get the data from Google sheet and load it to the Flutter Calendar?
This article explains how to fetch data from Google Sheets using Google Apps Script and display it in a Flutter Calendar widget.
STEP 1: Create a new google spreadsheet using the below link,
https://www.google.com/sheets/about/
STEP 2: Then, add the required data in the Google spreadsheet.
STEP 3: Now, open the Google AppScript Script editor for your spreadsheet and add the following doGet() method.
function doGet(request) {
var sheet=SpreadsheetApp.openById("17DQ3BqCdqDFte0MPYbwMPYk1YX4SsoT5bw48RFUjzls");
var values=sheet.getActiveSheet().getDataRange().getValues();
var data=[];
for(var i=1;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 as a web app and copy the generated URL for later use.
|
STEP 5: Add the http package in the Pubspec.yaml.
dependencies: flutter: sdk: flutter syncfusion_flutter_calendar: 19.2.44 http: ^0.13.3
STEP 6: To get the data from the above 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<Meeting> 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;
}
DateTime _convertDateFromString(String date) {
return DateTime.parse(date);
}
STEP 7: Using the FutureBuilder widget, display the online data.
child: Container(
child: FutureBuilder(
future: getDataFromGoogleSheet(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data != null) {
return SafeArea(
child: Container(
child: SfCalendar(
view: CalendarView.month,
monthViewSettings: MonthViewSettings(showAgenda: true),
dataSource: MeetingDataSource(snapshot.data),
initialDisplayDate: snapshot.data[0].from,
),
));
} else {
return Container(
child: Center(
child: Text('Loading.....'),
),
);
}
},
),
)
|
Conclusion
I hope you enjoyed learning about how to get the data from Google sheet and load it to the Flutter Calendar.
You can refer to our Flutter Calender feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Calendar documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
