How to get the data from Google sheet and load it to the Flutter Calendar?
In the Flutter Calendar, get the data from the Google sheet using the Google AppScript, and load that data to the Flutter Calendar Events.
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 for corresponding spreadsheet data, and add the 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 using the Deploy as web option, and get the URL.
|
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!
