如何使用 Firestore 数据库快照填充表日历

Question

我正在尝试填写要在 TableCalendar 上显示的事件地图（使用表日历包）

要填写事件我需要一个地图

所以一开始我创建了这个：

Map<DateTime, List<Event>> _events;

然后我填充了一些虚拟数据

_events = {
      _selectedDay: [
        Event('test', 'testEvent', DateTime(2020, 9, 10)),
      ],
      _selectedDay.add(Duration(days: 1)): [
        Event('test', 'Soirée Cinema', DateTime(2020, 9, 11)),
        Event('test', 'On fait de la poutine', DateTime(2020, 9, 11)),
        Event('test', 'Casse tête', DateTime(2020, 9, 11)),
        Event('test', 'Ohhh Shit', DateTime(2020, 9, 11)),
      ],
      DateTime(2020, 9, 15): [
        Event('test', 'Et Wala', DateTime(2020, 9, 15)),
      ]
    };

从现在开始，日历可以完美运行。 问题是当我尝试从我的 firestore 快照添加数据时。我对如何将快照中的数据添加到事件映射中完全感到困惑。你会看到我会添加一个评论，比如 .. IM LOST HERE

Widget build(BuildContext context) {
    return Scaffold(
      appBar: popAppBar(context, 'Horaire'),
      body: StreamBuilder(
          stream: Firestore.instance
              .collection('nurseries')
              .document(widget._favoriteNurseryId)
              .collection('events')
              .snapshots(),
          builder: (context, eventsSnapshot) {
            if (eventsSnapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            }
            if (eventsSnapshot.hasError) {
              return Center(
                  child: Text('Il y a une erreur dans votre calendrier'));
            }
            for (var i = 0; i < eventsSnapshot.data.lenght; i++) {
              _events.addEntries( //IM LOST HERE// );
            }
            
            return TableCalendar(
              locale: 'fr_FR',
              holidays: _holidays,
              events: _events,
              calendarController: _calendarController,
              initialCalendarFormat: CalendarFormat.month,

Answer 1

这是我在项目中的做法

if(snapshot.hasData){
      //parse json array here and input the list of events for the months
      List<CalendarItemData> snapData = snapshot.data;
      calendarList = snapData;
      _events = convertToMap(snapData);
      print(_events.toString());
      _selectedEvents = _events[_selectedDay] ?? [];
      return buildBody();
    }else if(snapshot.hasError){
      return Padding(
        padding: const EdgeInsets.all(10),
        child:Text(
          'There are no events in the Calendar for the selected category.',
          style:TextStyle(
              fontFamily:'Raleway',
              fontWeight:FontWeight.bold,
              fontSize:18),
          textAlign:TextAlign.center,
        ),
      );
}

//method to change calendar item to Map<DateTime,List>
Map<DateTime,List> convertToMap(List<CalendarItemData> item){
Map<DateTime, List> result;

for(int i = 0; i < item.length; i++){
  CalendarItemData data = item[i];
  //get the date and convert it to a DateTime variable
  DateTime currentDate = dateFormat.parse(data.eventDate);
  List eventNames = [];
  //add the event name to the the eventNames list for the current date.
  //search for another event with the same date and populate the eventNames List.
  for(int j = 0; j < item.length; j++){
    //create temp calendarItemData object.
    CalendarItemData temp = item[j];
    //establish that the temp date is equal to the current date
    if(data.eventDate == temp.eventDate) {
      //add the event name to the event List.
      eventNames.add(temp.eventName);
    } //else continue
  }

  //add the date and the event to the map if the date is not contained in the map
  if(result == null){
    result = {
      currentDate: eventNames
    };
  }else {
    result[currentDate] = eventNames;
  }
}

print(result);
return result;
}

希望这有助于解决您的问题。