Merge pull request #8 from Iconica-Development/feature/weekday-names

Make it possible to show the names of the day of the weeks in the overlay date time picker

lib/src/overlay_date_time_picker.dart

@@ -11,9 +11,10 @@ import 'package:flutter_date_time_picker/src/widgets/overlay_date_time_picker/ov
 class OverlayDateTimePicker extends StatefulWidget {
   const OverlayDateTimePicker({
     this.theme = const DateTimePickerTheme(),
+    this.textStyle = const TextStyle(),
     this.alignment = Alignment.bottomRight,
     this.initialDate,
-    this.size = const Size(325, 325),
+    this.size = const Size(325, 350),
     this.wrongTimeDialog,
     this.onTapDay,
     this.highlightToday = true,
@@ -26,6 +27,7 @@ class OverlayDateTimePicker extends StatefulWidget {
     super.key,
     this.buttonBuilder,
     this.closeOnSelectDate = true,
+    this.showWeekDays = true,
   }) : assert(child != null || buttonBuilder != null);
 
   /// The child contained by the DatePicker.
@@ -37,6 +39,9 @@ class OverlayDateTimePicker extends StatefulWidget {
   /// Visual properties for the [OverlayDateTimePicker]
   final DateTimePickerTheme theme;
 
+  /// Style to base the text on
+  final TextStyle textStyle;
+
   /// Callback that provides the date tapped on as a [DateTime] object.
   final Function(DateTime date)? onTapDay;
 
@@ -73,6 +78,9 @@ class OverlayDateTimePicker extends StatefulWidget {
   /// [closeOnSelectDate] is a bool that indicates if the overlay should be closed if a date has been picked.
   final bool closeOnSelectDate;
 
+  /// [showWeekDays] is a [bool] that determines if day in the week indicators should be shown
+  final bool showWeekDays;
+
   @override
   State<OverlayDateTimePicker> createState() => _OverlayDateTimePickerState();
 }
@@ -208,8 +216,10 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
           padding: const EdgeInsets.all(8.0),
           child: OverlayDateTimeContent(
             theme: widget.theme,
+            textStyle: widget.textStyle,
             size: widget.size,
             controller: _dateTimePickerController,
+            showWeekDays: true,
             onNextDate: nextDate,
             onPreviousDate: previousDate,
           ),

lib/src/widgets/overlay_date_time_picker/date_picker.dart

@@ -7,20 +7,25 @@ import 'package:flutter_date_time_picker/flutter_date_time_picker.dart';
 import 'package:flutter_date_time_picker/src/extensions/date_time.dart';
 import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
 import 'package:flutter_date_time_picker/src/widgets/overlay_date_time_picker/pickable_date.dart';
+import 'package:intl/intl.dart';
 
 class DatePicker extends StatelessWidget {
   const DatePicker({
     super.key,
     required this.controller,
     required this.theme,
+    required this.textStyle,
     required this.onSelectDate,
     required this.date,
+    required this.showWeekDays,
   });
 
   final DateTimePickerController controller;
   final DateTimePickerTheme theme;
+  final TextStyle textStyle;
   final void Function(DateTime date) onSelectDate;
   final DateTime date;
+  final bool showWeekDays;
 
   @override
   Widget build(BuildContext context) {
@@ -33,37 +38,66 @@ class DatePicker extends StatelessWidget {
 
     int addedIndex = 0;
 
-    if (daysToSkip >= 7) {
+    if (daysToSkip >= DateTime.daysPerWeek) {
-      addedIndex = 7;
+      addedIndex = DateTime.daysPerWeek;
     }
 
     int length = DateTime(date.year, date.month).daysInMonth() + daysToSkip;
-    int daysToAdd = 7 - length % 7;
+    int daysToAdd = DateTime.daysPerWeek - length % DateTime.daysPerWeek;
-    return GridView.count(
+    return Column(
-      physics: const NeverScrollableScrollPhysics(),
+      children: [
-      crossAxisCount: 7,
+        if (showWeekDays) ...[
-      children: List.generate(
+          Padding(
-        length + daysToAdd,
+            padding: const EdgeInsets.only(top: 8),
-        (index) {
+            child: Row(
-          DateTime todayDate = DateTime(
+              children: List.generate(DateTime.daysPerWeek, (index) {
-            date.year,
+                DateFormat dateFormatter = DateFormat("EE");
-            date.month,
+                return Expanded(
-            addedIndex + index + 1 - daysToSkip,
+                  child: Center(
-          );
+                    child: Padding(
-          return Padding(
+                      padding: const EdgeInsets.all(2.0),
-            padding: const EdgeInsets.all(2.0),
+                      child: Text(
-            child: PickableDate(
+                        // The first day in November 2022 is monday
-              isOffMonth: date.month != todayDate.month,
+                        // We use it to properly show monday as the first day and sunday as the last one
-              isDisabled: isDisabled(addedIndex + index, daysToSkip),
+                        dateFormatter.format(DateTime(2022, 11, index)),
-              isSelected: controller.selectedDate == todayDate,
+                        style: textStyle.copyWith(fontWeight: FontWeight.bold),
-              isToday: isToday(todayDate) && controller.highlightToday,
+                      ),
-              theme: theme,
+                    ),
-              date: todayDate,
+                  ),
-              onPressed: onSelectDate,
+                );
+              }),
             ),
-          );
+          ),
-        },
+        ],
-      ),
+        Expanded(
+          child: GridView.count(
+            physics: const NeverScrollableScrollPhysics(),
+            crossAxisCount: DateTime.daysPerWeek,
+            children: List.generate(
+              length + daysToAdd,
+              (index) {
+                DateTime todayDate = DateTime(
+                  date.year,
+                  date.month,
+                  addedIndex + index + 1 - daysToSkip,
+                );
+                return Padding(
+                  padding: const EdgeInsets.all(2.0),
+                  child: PickableDate(
+                    isOffMonth: date.month != todayDate.month,
+                    isDisabled: isDisabled(addedIndex + index, daysToSkip),
+                    isSelected: controller.selectedDate == todayDate,
+                    isToday: isToday(todayDate) && controller.highlightToday,
+                    theme: theme,
+                    date: todayDate,
+                    onPressed: onSelectDate,
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+      ],
     );
   }
 

lib/src/widgets/overlay_date_time_picker/overlay.dart

@@ -12,15 +12,19 @@ class OverlayDateTimeContent extends StatefulWidget {
   const OverlayDateTimeContent({
     super.key,
     required this.theme,
+    required this.textStyle,
     required this.size,
     required this.controller,
+    required this.showWeekDays,
     required this.onNextDate,
     required this.onPreviousDate,
   });
 
   final DateTimePickerTheme theme;
+  final TextStyle textStyle;
   final Size size;
   final DateTimePickerController controller;
+  final bool showWeekDays;
   final void Function() onNextDate;
   final void Function() onPreviousDate;
 
@@ -86,27 +90,33 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
                 controller: widget.controller,
                 onSelectDate: onSelectDate,
                 theme: widget.theme,
+                textStyle: widget.textStyle,
                 date: DateTime(
                   widget.controller.browsingDate.year,
                   widget.controller.browsingDate.month - 1,
                   1,
                 ),
+                showWeekDays: widget.showWeekDays,
               ),
               DatePicker(
                 controller: widget.controller,
                 onSelectDate: onSelectDate,
                 theme: widget.theme,
+                textStyle: widget.textStyle,
                 date: widget.controller.browsingDate,
+                showWeekDays: widget.showWeekDays,
               ),
               DatePicker(
                 controller: widget.controller,
                 onSelectDate: onSelectDate,
                 theme: widget.theme,
+                textStyle: widget.textStyle,
                 date: DateTime(
                   widget.controller.browsingDate.year,
                   widget.controller.browsingDate.month + 1,
                   1,
                 ),
+                showWeekDays: widget.showWeekDays,
               ),
             ],
           ),