diff --git a/em2rp/lib/views/calendar_page.dart b/em2rp/lib/views/calendar_page.dart index 892f42e..f3f8301 100644 --- a/em2rp/lib/views/calendar_page.dart +++ b/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 { DateTime? _selectedDay; EventModel? _selectedEvent; + @override + void initState() { + super.initState(); + initializeDateFormatting('fr_FR', null); + } + // Événements de test final List _testEvents = [ EventModel( @@ -138,6 +145,7 @@ class _CalendarPageState extends State { 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 { 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 { 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 { ), 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 { ), ), ), + // 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 { ), 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 { padding: const EdgeInsets.symmetric( horizontal: 12, vertical: 8), ), - child: const Text('Mois'), + child: const Text('Semaine'), ), IconButton( icon: const Icon(Icons.chevron_right), @@ -468,17 +547,42 @@ class _CalendarPageState extends State { ), ), ), - child: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text(_getDayName(day.weekday), - style: - const TextStyle(fontWeight: FontWeight.bold)), - Text('${day.day}', - style: const TextStyle(fontSize: 13)), - ], - ), + child: Stack( + children: [ + Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text(_getDayName(day.weekday), + style: const TextStyle( + 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 { } } + 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}'; } } }