How to show the tapped appointment details on another page in the Flutter Calendar

Question

So i have been working on a project and wanting to make a calendar app. I have been using flutter's plugin called Syncfusion Calendar. I have a problem where i have displayed an appointment(months view with agenda turned on) but i am unable to click on it but i want to make it functional so whenever i click on agenda's appointment it opens an info page about this appointment.

So here is the code i have right now

import 'package:calender_alarm/event_info.dart';
import 'package:calender_alarm/event_provider.dart';
import 'package:calender_alarm/event_view.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

import 'event_editor.dart';

class CalenderPage extends StatelessWidget {
  const CalenderPage({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final events = Provider.of<EventProvider>(context).events;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color.fromARGB(255, 255, 115, 0),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const EventEditingPage()),
        ),
        child: const Icon(Icons.add),
      ),
      body: SfCalendar(
          firstDayOfWeek: 1,
          view: CalendarView.month,
          showDatePickerButton: true,
          allowedViews: const [
            CalendarView.day,
            CalendarView.month,
          ],
          dataSource: EventDataSource(events),
          monthViewSettings: const MonthViewSettings(showAgenda: true),
          minDate: DateTime.now(),
          onTap: //unknown
          ),
    );
  }
}

class EventDataSource extends CalendarDataSource {
  EventDataSource(List<Event> appointments) {
    this.appointments = appointments;
  }

  Event getEvent(int index) => appointments![index] as Event;

  @override
  DateTime getStartTime(int index) => getEvent(index).from;

  @override
  String getSubject(int index) => getEvent(index).title;

  @override
  Color getColor(int index) => getEvent(index).backgroundColor;
}

I just don't know what to put in onTap so it chooses the selected appointment.

I went to some sites where were good answers but not form my example... I am expecting a bit of code that could help me open a new page with info from selected and clicked appointment.

Answer 1

I made a void function that was called by onTap and when it was called it sent context and detail parameter's.

Here is the completed code of onTap:

onTap: (details) => calendarTapped(context, details),

Here is the code of calendarTapped function:

void calendarTapped(
      BuildContext context, CalendarTapDetails calendarTapDetails) {
    if (calendarTapDetails.targetElement == CalendarElement.appointment) {
      Event event = calendarTapDetails.appointments![0];
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => EventView(event: event),
        ),
      );
    }
  }