title: Flutter Table Calendar : Showing Event from API to Table Calendar
body: <p>I want to show Calendar and including event, the event already exists from API. I searching plugin fit to my case and I found <a href="https://pub.dev/packages/table_calendar" rel="nofollow noreferrer">Table Calendar Plugin</a>. I read the example to show the event Manually and found it :</p>
  
  <pre><code>@override
    void initState() {
      super.initState();
      final _selectedDay = DateTime.now();
  
      _events = {
        _selectedDay.subtract(Duration(days: 30)): ['Event A0', 'Event B0', 'Event C0'],
        _selectedDay.subtract(Duration(days: 27)): ['Event A1'],
        _selectedDay.subtract(Duration(days: 20)): ['Event A2', 'Event B2', 'Event C2', 'Event D2'],
        _selectedDay.subtract(Duration(days: 16)): ['Event A3', 'Event B3'],
        _selectedDay.subtract(Duration(days: 10)): ['Event A4', 'Event B4', 'Event C4'],
        _selectedDay.subtract(Duration(days: 4)): ['Event A5', 'Event B5', 'Event C5'],
        _selectedDay.subtract(Duration(days: 2)): ['Event A6', 'Event B6'],
        _selectedDay: ['Event A7', 'Event B7', 'Event C7', 'Event D7'],
        _selectedDay.add(Duration(days: 1)): ['Event A8', 'Event B8', 'Event C8', 'Event D8'],
        _selectedDay.add(Duration(days: 3)): Set.from(['Event A9', 'Event A9', 'Event B9']).toList(),
        _selectedDay.add(Duration(days: 7)): ['Event A10', 'Event B10', 'Event C10'],
        _selectedDay.add(Duration(days: 11)): ['Event A11', 'Event B11'],
        _selectedDay.add(Duration(days: 17)): ['Event A12', 'Event B12', 'Event C12', 'Event D12'],
        _selectedDay.add(Duration(days: 22)): ['Event A13', 'Event B13'],
        _selectedDay.add(Duration(days: 26)): ['Event A14', 'Event B14', 'Event C14'],
      };
  
      _selectedEvents = _events[_selectedDay] ?? [];
      _calendarController = CalendarController();
  
      _animationController = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 400),
      );
  
      _animationController.forward();
    }
  </code></pre>
  
  <p>But the above example to show event is static, I need to show event already exist from my API to <a href="https://github.com/aleksanderwozniak/table_calendar/blob/master/example/lib/main.dart" rel="nofollow noreferrer">Table Calendar</a> dynamically. 
  <p> I'm so new for this package, How can I handle my case? </p>
  
  <h1>Result API</h1>
  
  <pre><code>{
      "status": "ok",
      "message": "Event Is Found",
      "data": [
          {
              "kodeEvent": "1",
              "tanggalEvent": "2020-01-15",
              "judulEvent": "Bangun Kembali 200 Masjid dan Mushalla Anti Gempa",
              "lokasiEvent": "Lombok",
              "isiEvent": "Gempa Bumi dahsyat bertubi-tubi guncang lombok, kini Pulau seribu Masjid lemah tak berdaya, Lebih dari 500 Masjid dan Mushalla rata dengan tanah, kini ibadah saudara kita harus bertebaran dimana-mana , masih banyak warga yang tak bisa melaksanakan shalat dengan nyaman. Lokasi masjid dan mushalla sudah tak dapat dipake kembali , semua rusak parah dan bahkan sudh rata dengan tanah.&lt;br /&gt;&lt;br /&gt;Terpaksa mereka shalat di luar, tempat terbuka , bahkan di atas reruntuhan bangunan rumah sekalipun. Kini tak kurang dari 300 Masjid dan Mushalla yang dilaporkan rusak, dan lebih dari 70 masjid yang hancur rata dengan tanah karena gempa. semua masjid ini tersebar di 3 kabupaten (lombok utara, lombok barat dan lombok timur).",
              "fotoEvent": "event_5e4b8cd198530_202002181405.jpg",
              "waktuEvent": "09:00 s.d Selesai",
              "statusEvent": "t",
              "createBy": "0",
              "createTime": "2020-01-29 16:37:26",
              "updateBy": "",
              "updateTime": "2020-02-18 14:05:53"
          },
          {
              "kodeEvent": "2",
              "tanggalEvent": "2020-03-31",
              "judulEvent": "Bangun Kembali 100 Masjid dan Mushalla Anti Gempa",
              "lokasiEvent": "Jakarta",
              "isiEvent": "Gempa Bumi dahsyat bertubi-tubi guncang lombok, kini Pulau seribu Masjid lemah tak berdaya, Lebih dari 500 Masjid dan Mushalla rata dengan tanah, kini ibadah saudara kita harus bertebaran dimana-mana , masih banyak warga yang tak bisa melaksanakan shalat dengan nyaman. Lokasi masjid dan mushalla sudah tak dapat dipake kembali , semua rusak parah dan bahkan sudh rata dengan tanah.&lt;br /&gt;&lt;br /&gt;Terpaksa mereka shalat di luar, tempat terbuka , bahkan di atas reruntuhan bangunan rumah sekalipun. Kini tak kurang dari 300 Masjid dan Mushalla yang dilaporkan rusak, dan lebih dari 70 masjid yang hancur rata dengan tanah karena gempa. semua masjid ini tersebar di 3 kabupaten (lombok utara, lombok barat dan lombok timur).",
              "fotoEvent": "event_5e4b8d3d74b44_202002181407.jpg",
              "waktuEvent": "09:00 s.d Selesai",
              "statusEvent": "t",
              "createBy": "",
              "createTime": "2020-02-18 14:07:41",
              "updateBy": "",
              "updateTime": "0000-00-00 00:00:00"
          },
          {
              "kodeEvent": "3",
              "tanggalEvent": "2020-01-31",
              "judulEvent": "Bangun Kembali 200 Masjid dan Mushalla Anti Gempa",
              "lokasiEvent": "Bandung",
              "isiEvent": "Gempa Bumi dahsyat bertubi-tubi guncang lombok, kini Pulau seribu Masjid lemah tak berdaya, Lebih dari 500 Masjid dan Mushalla rata dengan tanah, kini ibadah saudara kita harus bertebaran dimana-mana , masih banyak warga yang tak bisa melaksanakan shalat dengan nyaman. Lokasi masjid dan mushalla sudah tak dapat dipake kembali , semua rusak parah dan bahkan sudh rata dengan tanah.&lt;br /&gt;&lt;br /&gt;Terpaksa mereka shalat di luar, tempat terbuka , bahkan di atas reruntuhan bangunan rumah sekalipun. Kini tak kurang dari 300 Masjid dan Mushalla yang dilaporkan rusak, dan lebih dari 70 masjid yang hancur rata dengan tanah karena gempa. semua masjid ini tersebar di 3 kabupaten (lombok utara, lombok barat dan lombok timur).",
              "fotoEvent": "event_5e4b8d72e2d37_202002181408.jpg",
              "waktuEvent": "09:00 s.d Selesai",
              "statusEvent": "t",
              "createBy": "",
              "createTime": "2020-02-18 14:08:34",
              "updateBy": "",
              "updateTime": "0000-00-00 00:00:00"
          }
      ]
  }
  </code></pre>
  
  <h1>Model</h1>
  
  <pre><code>import 'dart:convert';
  
  class EventModel {
    String kodeEvent;
    DateTime tanggalEvent;
    String judulEvent;
    String lokasiEvent;
    String isiEvent;
    String fotoEvent;
    String waktuEvent;
    String statusEvent;
    String createBy;
    DateTime createTime;
    String updateBy;
    String updateTime;
  
    EventModel({
      this.kodeEvent,
      this.tanggalEvent,
      this.judulEvent,
      this.lokasiEvent,
      this.isiEvent,
      this.fotoEvent,
      this.waktuEvent,
      this.statusEvent,
      this.createBy,
      this.createTime,
      this.updateBy,
      this.updateTime,
    });
  
    factory EventModel.fromJson(Map&lt;String, dynamic&gt; json) =&gt; EventModel(
          kodeEvent: json["kodeEvent"],
          tanggalEvent: DateTime.parse(json["tanggalEvent"]),
          judulEvent: json["judulEvent"],
          lokasiEvent: json["lokasiEvent"],
          isiEvent: json["isiEvent"],
          fotoEvent: json["fotoEvent"],
          waktuEvent: json["waktuEvent"],
          statusEvent: json["statusEvent"],
          createBy: json["createBy"],
          createTime: DateTime.parse(json["createTime"]),
          updateBy: json["updateBy"],
          updateTime: json["updateTime"],
        );
  }
  
  </code></pre>
  
  <h1>Event Screen</h1>
  
  <pre><code>class _EventScreenState extends State&lt;EventScreen&gt; {
    Future&lt;List&lt;EventModel&gt;&gt; getAllEvent;
  
    CalendarController calendarController;
    @override
    void initState() {
      super.initState();
      calendarController = CalendarController();
      getAllEvent = eventApi.getAllEvent();
    }
  
    @override
    void dispose() {
      calendarController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: &lt;Widget&gt;[
            TableCalendar(
              calendarController: calendarController,
              startingDayOfWeek: StartingDayOfWeek.monday,
              events: ,
            ),
            FutureBuilder(
              future: getAllEvent,
              builder: (BuildContext context,
                  AsyncSnapshot&lt;List&lt;EventModel&gt;&gt; snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  if (snapshot.hasError) {
                    return ErrorFutureBuilder(errorText: snapshot.error);
                  } else {
                    return ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        final result = snapshot.data[index];
                        return Text(result.tanggalEvent);
                      },
                    );
                  }
                } else {
                  return LoadingFutureBuilder();
                }
              },
            ),
          ],
        ),
      );
    }
  }
  
  </code></pre>
  
  <h1>GetAllEvent</h1>
  
  <pre><code> Future&lt;List&lt;EventModel&gt;&gt; getAllEvent() async {
      try {
        final response = await http.get(_baseUrl);
        final Map&lt;String, dynamic&gt; responseJson = json.decode(response.body);
        if (responseJson["status"] == "ok") {
          List eventList = responseJson['data'];
          final result = eventList
              .map&lt;EventModel&gt;((json) =&gt; EventModel.fromJson(json))
              .toList();
          return result;
        } else {
          throw CustomError(responseJson['message']);
        }
      } catch (e) {
        return Future.error(e.toString());
      }
    }
  </code></pre>
  
  <h1>My Current Result</h1>
  
  <p><img src="https://i.stack.imgur.com/94bqO.jpg" height="500"></p>