Good evening,

I start flutter and I can not make a view on the calendar.

Currently, I have a view of the days of the month and when I click on it opens a page.

But I would like the days to also have a zone where I would display the list of reservations that were created. I attach the image I have. A basic view And the image I’d like.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Agenda',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _selectedDay = DateTime.now();
  DateTime _focusedDay = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Agenda'),
        backgroundColor: Colors.orangeAccent,
        leading: Builder(
          builder: (context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
            );
          },
        ),
      ),
      body: Column(
        children: [
          TableCalendar(
            firstDay: DateTime.utc(2024, 1, 1),
            lastDay: DateTime.utc(2060, 12, 31),
            focusedDay: _focusedDay,
            calendarFormat: CalendarFormat.month,
            startingDayOfWeek: StartingDayOfWeek.monday,
            weekNumbersVisible: true,
            selectedDayPredicate: (day) {
              return isSameDay(_selectedDay, day);
            },
            onDaySelected: (selectedDay, focusedDay) {
              setState(() {
                _selectedDay = selectedDay;
                _focusedDay = focusedDay;
              });
              // Navigator.push(
              //   context,
              //   MaterialPageRoute(
              //     builder: (context) => CreateLocations(date: selectedDay),
              //   ),
              // );
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const CreateLocations()));
            },
            onFormatChanged: (format) {
              if (_calendarFormat != format) {
                setState(() {
                  _calendarFormat = format;
                });
              }
            },
            onPageChanged: (focusedDay) {
              _focusedDay = focusedDay;
            },
          ),
          // Vous pouvez ajouter ici une liste de réservations pour la date sélectionnée
        ],
      ),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.orangeAccent,
              ),
              child: Text('LOCAPORTE'),
            ),
            ListTile(
              title: const Text('Accueil'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const MyApp()));
              },
            ),
            ListTile(
              title: const Text('Clients'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const Clients()));
              },
            ),
            ListTile(
              title: const Text('Matériel'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const Materiels()));
              },
            ),
            ListTile(
              title: const Text('Produits'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const Produits()));
              },
            ),
            ListTile(
              title: const Text('Réservations'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const Agenda()));
              },
            ),
            ListTile(
              title: const Text('Locations'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const Locations()));
              },
            ),
            ListTile(
              title: const Text('Livraisons'),
              onTap: () {},
            ),
            ListTile(
              title: const Text('A facturer'),
              onTap: () {},
            ),
            ListTile(
              title: const Text('Historique'),
              onTap: () {},
            ),
            ListTile(
              title: const Text('Transferts'),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const Transferts()));
              },
            ),
            ListTile(
              title: const Text('Type de Clients'),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const Typeclients()));
              },
            ),
            ListTile(
              title: const Text('Type de matériel'),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const Typemateriels()));
              },
            ),
            ListTile(
              title: const Text('Utilisateurs'),
              onTap: () {},
            ),
            ListTile(
              title: const Text('Déconnexion'),
              onTap: () {},
            ),
          ],
        ),
      ),
    );
  }
}

class _getEventsForDay {
  _getEventsForDay();

  get length => null;
}

// class ReservationPage extends StatelessWidget {
//   final DateTime date;

//   const ReservationPage({super.key, required this.date});

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text('Nouvelle Réservation'),
//       ),
//       body: Center(
//         child: Column(
//           mainAxisAlignment: MainAxisAlignment.center,
//           children: <Widget>[
//             const Text('Créer une réservation pour :'),
//             Text(
//               '${date.toLocal()}'.split(' ')[0],
//               style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
//             ),
//             // Ajoutez ici un formulaire pour créer une nouvelle réservation
//           ],
//         ),
//       ),
//     );
//   }
// }

I looked for the different styles but I do not find.

Thanks in advance