Flutter: TableCalendar how to display events from Firebase FireStore - flutter

Question

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';
}