Flutter: TableCalendar how to display events from Firebase FireStore

Viewed 977

I'm making app with Calendar. As calendar i'm using Table Calendar. I also use FireStore in my app. After implementing TableCalendar i followed github demo to display events Now i want to use FireStore with Table Calendar. How can i make Table Calendar display events from FireStore? I have node called 'date' in Firestore witch contains timestamp.

EventPage code:

late final ValueNotifier<List<Event>> _selectedEvents;
final Stream<QuerySnapshot> eventsStream =
    FirebaseFirestore.instance.collection('events').snapshots();
DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay;

@override
void initState() {
  super.initState();
  _selectedDay = _focusedDay;
  _selectedEvents = ValueNotifier(_getEventsForDay(_selectedDay!));
}

@override
void dispose() {
  super.dispose();
  _selectedEvents.dispose();
}

List<Event> _getEventsForDay(DateTime day) {
  return kEvents[day] ?? [];
}

void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
  if (!isSameDay(_selectedDay, selectedDay)) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });

    _selectedEvents.value = _getEventsForDay(selectedDay);
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: StreamBuilder<Object>(
        stream: eventsStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {}
          return Column(
            children: [
              Card(
                color: MainTheme.lightTheme.primaryColor,
                child: TableCalendar<Event>(
                  firstDay: kFirstDay,
                  lastDay: kLastDay,
                  focusedDay: _focusedDay,
                  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
                  eventLoader: _getEventsForDay,
                  headerStyle: HeaderStyle(
                    titleTextStyle: TextStyle(color: Colors.white),
                    formatButtonVisible: false,
                    leftChevronIcon: Icon(
                      Icons.chevron_left,
                      color: Colors.white,
                    ),
                    rightChevronIcon: Icon(
                      Icons.chevron_right,
                      color: Colors.white,
                    ),
                  ),
                  daysOfWeekStyle: DaysOfWeekStyle(
                    weekdayStyle: TextStyle(color: Colors.white),
                    weekendStyle: TextStyle(color: Colors.white),
                  ),
                  startingDayOfWeek: StartingDayOfWeek.monday,
                  onDaySelected: _onDaySelected,
                ),
              ),
              SizedBox(height: 8),
              Expanded(
                child: ValueListenableBuilder<List<Event>>(
                  valueListenable: _selectedEvents,
                  builder: (context, value, _) {
                    return ListView.builder(
                      itemCount: value.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text('${value[index]}'),
                        );
                      },
                    );
                  },
                ),
              )
            ],
          );
        },
      ),
    ),
  );
}

EventsModel code

class Event {
  final String title;

  const Event(this.title);

  @override
  String toString() => title;
}

final kEvents = LinkedHashMap<DateTime, List<Event>>(
  equals: isSameDay,
  hashCode: getHashCode,
)..addAll(_kEventSource);

final _kEventSource = Map.fromIterable(
  List.generate(50, (index) => index),
  key: (item) => DateTime.utc(kFirstDay.year, kFirstDay.month, item * 5),
  value: (item) => List.generate(
    item % 4 + 1,
    (index) => Event('Event $item | ${index + 1}'),
  ),
)..addAll(
    {
      kToday: [
        Event('Today\'s Event 1'),
        Event('Today\'s Event 2'),
      ],
    },
  );

int getHashCode(DateTime key) {
  return key.day * 1000000 + key.month * 10000 + key.year;
}

final kToday = DateTime.now();
final kFirstDay = DateTime(kToday.year, kToday.month - 6, kToday.day);
final kLastDay = DateTime(kToday.year, kToday.month + 6, kToday.day);

P.s i created new Function witch gets data from FireStore and stores it in List. How can i use this list to display events in Table Calendar?

getEventsList() async {
    var data = await FirebaseFirestore.instance.collection('events').get();
    setState(() {
      // eventsList = data.docs;
    });
    for (int i = 0; i < data.docs.length; i++)
      eventsList.add(data.docs[i]['date']);

    print(eventsList);

    return 'compelte';
  }
0 Answers
Related