Flutter表日历：从Firestore加载事件

mgdq6dx1 于 2023-03-13 发布在 Flutter

关注(0)|答案(1)|浏览(139)

我正在使用表日历，但从firestore的事件加载没有显示在表日历上（现在它只显示一个事件列表，没有过滤日期）。我如何向用户显示，当他们点击选定的日期，它会显示该特定日期的事件？

上图是结果。

上面的图片是我的firestore

StreamBuilder(
    stream: _firestore.collection('planning').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Center(
          child: Text('Loading'),
        );
      }

      var docs = snapshot.data.docs;

      List<Detail> dataWidgets = [];

      var event;
      var selectedDate;

      for(var data in docs){
        selectedDate = data.data()['selectedDate'];
        final wpEventController = data.data()['wpEventController'];
        event = data.data()['event'];
        final detailWp = data.data()['detailWp'];
        final name = data.data()['name'];
        final selectedEvent = data.data()['selectedEvent'];

        final dataWidget = Detail(selectedDate: selectedDate,wpEventController: wpEventController,event: event,detailWP: detailWp,name: name,selectedEvent:selectedEvent);
        dataWidgets.add(dataWidget);

      }

      print(event);

上面是我的StreamBuilder，
I/扑动（16094）：{日期：时间戳（秒=1678363200，纳秒=0），事件：[测试]}
以上是事件的打印件。

TableCalendar(
              onDaySelected: (date, events, holiday){
                setState((){
                  _selectedEvent = events;
                });
              },
              events: _events,
              calendarController: _calendarController,
              startingDayOfWeek: StartingDayOfWeek.monday,
              headerStyle: HeaderStyle(formatButtonShowsNext: false),
              calendarStyle: CalendarStyle(
                  selectedColor: Colors.red[900], todayColor: Colors.red),
            ),

以上是我的台历。
Table Calendar中的事件需要Map<DateTime, List<dynamic>>。

Map <DateTime,List<dynamic>>_events;

flutter

来源：https://stackoverflow.com/questions/75692312/flutter-table-calendar-load-event-from-firestore

1条答案

按热度按时间

bpsygsoo1#

要显示选定日期的事件，您需要将event转换为您建议的类型Map <DateTime,List<dynamic>> _events;，但我建议您在此处使用Map <DateTime,List<Detail>> _events;，因为这将有助于数据建模。
以下是我测试和工作的结果：

StreamBuilder(
  stream: FirebaseFirestore.instance.collection('planning').snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: Text('Loading'),
      );
    }

    var docs = snapshot.data.docs;

    Map<DateTime, List<Detail>> events = {};

    for (var data in docs) {
      var eventDate = (data.data()['date'] as Timestamp).toDate();
      var eventData = data.data()['event'];
      var selectedDate = data.data()['selectedDate'];
      var name = data.data()['name'];
      var selectedEvent = data.data()['selectedEvent'];
      var detailWp = data.data()['detailWp'];
      var wpEventController = data.data()['wpEventController'];

      if (events[eventDate] == null) {
        events[eventDate] = [];
      }

      var yourData = Detail(
        date: eventDate,
        event: eventData,
        selectedDate: selectedDate,
        name: name,
        selectedEvent: selectedEvent,
        detailWp: detailWp,
        wpEventController: wpEventController,
      );

      events[eventDate].add(yourData);
    }

    return TableCalendar(
      events: events.map(
        (key, value) => MapEntry(
          key,
          value.map((data) => data.event).toList(),
        ),
      ),
      calendarController: _calendarController,
      onDaySelected: (date, events, holidays) {
        setState(() {
          _selectedEvents = events.map((event) => event as Detail).toList();
        });
      },
      startingDayOfWeek: StartingDayOfWeek.monday,
      headerStyle: HeaderStyle(formatButtonShowsNext: false),
      calendarStyle: CalendarStyle(
        selectedColor: Colors.red[900],
        todayColor: Colors.red,
      ),
    );
  },
);

我已经使用map将Detail对象转换为事件字段。如果我们使用Map <DateTime,List<Detail>>类型而不是Map <DateTime,List<dynamic>>，我们将获得自动完成功能，并将数据转换为Model结构以获得类型安全。
参考来源：Filter list by calendar，Table Calendar

赞(0）回复(0）举报 2023-03-13

我来回答

Flutter表日历：从Firestore加载事件

1条答案

相关问题

热门标签

最新问答