How to Load Appointments On Demand Using Web Services in Flutter Event Calendar
Tags: flutter, dart, android, ios
Published: 2020-09-07 06:15:36

---
title: How to Load Appointments On Demand Using Web Services in Flutter Event Calendar
published: true
date: 2020-09-04 15:51:31 UTC
tags: flutter, dart, android, ios
canonical_url: https://www.syncfusion.com/blogs/post/how-to-load-appointments-on-demand-using-web-services-in-flutter-event-calendar.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/12pntdxbp9om2k5r1you.png
---

When developing Flutter applications, the most prevalent requirement is the ability to access data from web services. The Syncfusion [Flutter Calendar control](https://www.syncfusion.com/flutter-widgets/flutter-calendar) provides all the common scheduling functionalities that allow users to load appointments on-demand from web services as custom appointments.

In this blog post, we are going to discuss loading appointments on demand via web services in the Flutter Calendar. If you are new to the Calendar control, please read this [Getting Started](https://help.syncfusion.com/flutter/calendar/getting-started) article before proceeding.

Let’s get started!

## Load appointments on demand using web services

We are going to load and display custom meeting appointments on demand for June 2017.

### **Step #1: Create**  a ** web API service**

Web services are server-side applications that are meant to serve data or logic to various client-side applications. [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) and [SOAP](https://en.wikipedia.org/wiki/SOAP) are the widely used industry-standard web service architectures.

Refer to this [tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.2&tabs=visual-studio) to create an ASP.NET Core web API service and host it for public access. For this demo, we are going to use this [hosted service](https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData).

### Step #2: Create a class

Create a class named  **Meeting** with a data structure similar to the web API service, containing the appointment’s subject, time, and other related information.

Refer to the following code example.

```dart
class Meeting {
  Meeting(
      {this.eventName,
      this.from,
      this.to,
      this.background,
      this.allDay = false});
 
  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool allDay;
}
```

### Step #3: Fetch ** data from the web service**

To fetch the data from **ejservices** using the [http.get()](https://pub.dev/documentation/http/latest/http/get.html) method:

1. Create an asynchronous method **getDataFromWeb** and consume the API service URI (Uniform Resource Identifier).
2. Use the **decode** method to retrieve the web appointment data as JSON **.** 
3. Use the **await** option to consume the value.
4. Modify the received JSON data into a list of appointments.

Refer to the following code example.

```dart
Future<List<Meeting>> getDataFromWeb() async {
  var data = await http.get(
      "https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData");
  var jsonData = json.decode(data.body);
 
  final List<Meeting> appointmentData = [];
  final Random random = new Random();
  for (var data in jsonData) {
    Meeting meetingData = Meeting(
        eventName: data['Subject'],
        from: _convertDateFromString(
          data['StartTime'],
        ),
        to: _convertDateFromString(data['EndTime']),
        background: _colorCollection[random.nextInt(9)],
        allDay: data['AllDay']);
    appointmentData.add(meetingData);
  }
  return appointmentData;
}
 
DateTime _convertDateFromString(String date) {
  return DateTime.parse(date);
}
 
void _initializeEventColor() {
  this._colorCollection = new List<Color>();
  _colorCollection.add(const Color(0xFF0F8644));
  _colorCollection.add(const Color(0xFF8B1FA9));
  _colorCollection.add(const Color(0xFFD20100));
  _colorCollection.add(const Color(0xFFFC571D));
  _colorCollection.add(const Color(0xFF36B37B));
  _colorCollection.add(const Color(0xFF01A1EF));
  _colorCollection.add(const Color(0xFF3D4FB5));
  _colorCollection.add(const Color(0xFFE47C73));
  _colorCollection.add(const Color(0xFF636363));
  _colorCollection.add(const Color(0xFF0A8043));
}
```

### Step #4: Display the data

Use the [FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html) widget to display the web appointment data on screen. It is easy to work with asynchronous data sources with the FutureBuilder widget.

Refer to the following code example.

```dart
FutureBuilder(
  future: getDataFromWeb(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.data != null) {
      return SafeArea(
        child: Container(
            child: SfCalendar(
          view: CalendarView.week,
          initialDisplayDate: DateTime(2017, 6, 01, 9, 0, 0),
          dataSource: MeetingDataSource(snapshot.data),
        )),
      );
    } else {
      return Container(
        child: Center(
          child: Text('$_networkStatusMsg'),
        ),
      );
    }
  },
),
```

Now, the Flutter Calendar control is configured to load appointments on demand via a web API service.

Running the sample produced by the previous steps will render the Flutter Calendar with appointments like the one in the following screenshot.

![Flutter Calendar Loaded with Appointments via Web API Service](https://www.syncfusion.com/blogs/wp-content/uploads/2020/09/Flutter-calendar.png)<figcaption>Flutter Calendar Loaded with Appointments<br>via Web API Service</figcaption>

**Additional reference**

The following blog post covers the same topic but for the Syncfusion Xamarin.Forms Scheduler component: [https://www.syncfusion.com/blogs/post/how-to-load-appointments-on-demand-via-web-services-in-xamarin-forms-scheduler.aspx](https://dev.to/syncfusion/how-to-load-appointments-on-demand-via-web-services-in-xamarin-forms-scheduler-af0)

## Conclusion

In this blog post, we’ve discussed loading appointments on demand via web services in the [Flutter Calendar control](https://www.syncfusion.com/flutter-widgets/flutter-calendar). With this, we can load appointments in our calendar only when we need them, along with some custom features. You can also check out our project samples in this [GitHub repository](https://github.com/SyncfusionExamples/online-json-data-calendar-flutter). Feel free to try out this sample and share your feedback or questions in the comments section below.

You can also contact us through our [support forum](https://www.syncfusion.com/forums)s, [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). We are here to help you succeed!