Vue par mois et pas semaine OK

em2rp/lib/views/calendar_page.dart

@@ -8,6 +8,7 @@ import 'package:table_calendar/table_calendar.dart';
 import 'package:em2rp/models/event_model.dart';
 import 'package:em2rp/widgets/event_details.dart';
 import 'package:latlong2/latlong.dart';
+import 'package:intl/date_symbol_data_local.dart';
 
 class CalendarPage extends StatefulWidget {
   const CalendarPage({Key? key}) : super(key: key);
@@ -22,6 +23,12 @@ class _CalendarPageState extends State<CalendarPage> {
   DateTime? _selectedDay;
   EventModel? _selectedEvent;
 
+  @override
+  void initState() {
+    super.initState();
+    initializeDateFormatting('fr_FR', null);
+  }
+
   // Événements de test
   final List<EventModel> _testEvents = [
     EventModel(
@@ -138,6 +145,7 @@ class _CalendarPageState extends State<CalendarPage> {
         focusedDay: _focusedDay,
         calendarFormat: _calendarFormat,
         startingDayOfWeek: StartingDayOfWeek.monday,
+        locale: 'fr_FR',
         availableCalendarFormats: const {
           CalendarFormat.month: 'Mois',
           CalendarFormat.week: 'Semaine',
@@ -178,6 +186,7 @@ class _CalendarPageState extends State<CalendarPage> {
             border: Border.all(color: Colors.grey.shade300),
             borderRadius: BorderRadius.circular(4),
           ),
+          outsideDaysVisible: false,
           cellMargin: EdgeInsets.zero,
           cellPadding: EdgeInsets.zero,
         ),
@@ -196,8 +205,22 @@ class _CalendarPageState extends State<CalendarPage> {
           rightChevronIcon:
               const Icon(Icons.chevron_right, color: AppColors.rouge),
           headerPadding: const EdgeInsets.symmetric(vertical: 8),
+          titleTextStyle: const TextStyle(
+            fontSize: 18,
+            fontWeight: FontWeight.bold,
+          ),
         ),
         calendarBuilders: CalendarBuilders(
+          dowBuilder: (context, day) {
+            return Center(
+              child: Text(
+                _getDayName(day.weekday),
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            );
+          },
           defaultBuilder: (context, day, focusedDay) {
             final events = _getEventsForDay(day);
 
@@ -209,7 +232,10 @@ class _CalendarPageState extends State<CalendarPage> {
               ),
               child: Stack(
                 children: [
-                  Center(
+                  // Numéro du jour en haut à gauche
+                  Positioned(
+                    top: 4,
+                    left: 4,
                     child: Text(
                       day.day.toString(),
                       style: TextStyle(
@@ -218,12 +244,39 @@ class _CalendarPageState extends State<CalendarPage> {
                       ),
                     ),
                   ),
+                  // Badge du nombre d'événements en haut à droite
+                  if (events.isNotEmpty)
+                    Positioned(
+                      top: 4,
+                      right: 4,
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 6, vertical: 2),
+                        decoration: BoxDecoration(
+                          color: isSameDay(day, _selectedDay)
+                              ? Colors.white
+                              : AppColors.rouge,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Text(
+                          events.length.toString(),
+                          style: TextStyle(
+                            color: isSameDay(day, _selectedDay)
+                                ? AppColors.rouge
+                                : Colors.white,
+                            fontSize: 12,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  // Liste des événements en dessous
                   if (events.isNotEmpty)
                     Positioned(
                       bottom: 2,
                       left: 2,
                       right: 2,
-                      top: 24, // Espace pour le numéro du jour
+                      top: 28,
                       child: SingleChildScrollView(
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
@@ -290,18 +343,44 @@ class _CalendarPageState extends State<CalendarPage> {
               ),
               child: Stack(
                 children: [
-                  Center(
+                  // Numéro du jour en haut à gauche
+                  Positioned(
+                    top: 4,
+                    left: 4,
                     child: Text(
                       day.day.toString(),
                       style: const TextStyle(color: Colors.white),
                     ),
                   ),
+                  // Badge du nombre d'événements en haut à droite
+                  if (events.isNotEmpty)
+                    Positioned(
+                      top: 4,
+                      right: 4,
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 6, vertical: 2),
+                        decoration: BoxDecoration(
+                          color: Colors.white,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Text(
+                          events.length.toString(),
+                          style: const TextStyle(
+                            color: AppColors.rouge,
+                            fontSize: 12,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  // Liste des événements en dessous
                   if (events.isNotEmpty)
                     Positioned(
                       bottom: 2,
                       left: 2,
                       right: 2,
-                      top: 24, // Espace pour le numéro du jour
+                      top: 28,
                       child: SingleChildScrollView(
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
@@ -434,7 +513,7 @@ class _CalendarPageState extends State<CalendarPage> {
                       padding: const EdgeInsets.symmetric(
                           horizontal: 12, vertical: 8),
                     ),
-                    child: const Text('Mois'),
+                    child: const Text('Semaine'),
                   ),
                   IconButton(
                     icon: const Icon(Icons.chevron_right),
@@ -468,18 +547,43 @@ class _CalendarPageState extends State<CalendarPage> {
                       ),
                     ),
                   ),
-                  child: Center(
+                  child: Stack(
+                    children: [
+                      Center(
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
                             Text(_getDayName(day.weekday),
-                            style:
+                                style: const TextStyle(
-                                const TextStyle(fontWeight: FontWeight.bold)),
+                                    fontWeight: FontWeight.bold)),
                             Text('${day.day}',
                                 style: const TextStyle(fontSize: 13)),
                           ],
                         ),
                       ),
+                      if (_getEventsForDay(day).isNotEmpty)
+                        Positioned(
+                          top: 4,
+                          right: 4,
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(
+                                horizontal: 6, vertical: 2),
+                            decoration: BoxDecoration(
+                              color: AppColors.rouge,
+                              borderRadius: BorderRadius.circular(10),
+                            ),
+                            child: Text(
+                              _getEventsForDay(day).length.toString(),
+                              style: const TextStyle(
+                                color: Colors.white,
+                                fontSize: 10,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                    ],
+                  ),
                 );
               }),
             ],
@@ -679,26 +783,42 @@ class _CalendarPageState extends State<CalendarPage> {
     }
   }
 
+  String _getMonthName(int month) {
+    switch (month) {
+      case 1:
+        return 'Janvier';
+      case 2:
+        return 'Février';
+      case 3:
+        return 'Mars';
+      case 4:
+        return 'Avril';
+      case 5:
+        return 'Mai';
+      case 6:
+        return 'Juin';
+      case 7:
+        return 'Juillet';
+      case 8:
+        return 'Août';
+      case 9:
+        return 'Septembre';
+      case 10:
+        return 'Octobre';
+      case 11:
+        return 'Novembre';
+      case 12:
+        return 'Décembre';
+      default:
+        return '';
+    }
+  }
+
   String _getMonthYearString(DateTime weekStart, DateTime weekEnd) {
-    final months = [
-      '',
-      'Janvier',
-      'Février',
-      'Mars',
-      'Avril',
-      'Mai',
-      'Juin',
-      'Juillet',
-      'Août',
-      'Septembre',
-      'Octobre',
-      'Novembre',
-      'Décembre'
-    ];
     if (weekStart.month == weekEnd.month) {
-      return '${months[weekStart.month]} ${weekStart.year}';
+      return '${_getMonthName(weekStart.month)} ${weekStart.year}';
     } else {
-      return '${months[weekStart.month]} - ${months[weekEnd.month]} ${weekEnd.year}';
+      return '${_getMonthName(weekStart.month)} - ${_getMonthName(weekEnd.month)} ${weekEnd.year}';
     }
   }
 }