feat: Added the feature to add the weekdays letters above the months

CHANGELOG.md

@@ -1,18 +1,25 @@
+## 2.2.0
+
+- Added the abilty to add the weekday letters above the months
+
 ## 2.1.0
-* Fixed internalization of the package
-* Added dragcallback to the draggablesheet
+
+- Fixed internalization of the package
+- Added dragcallback to the draggablesheet
 
 ## 2.0.0
-* Added overlay variant of datetimepicker
+
+- Added overlay variant of datetimepicker
 
 ## 1.2.0
-* Made date time picker height customizable
+
+- Made date time picker height customizable
 
 ## 1.1.0
 
-* Added option to change background color of date picker.
-* Added option to style the bar at the bottom of the date picker.
+- Added option to change background color of date picker.
+- Added option to style the bar at the bottom of the date picker.
 
 ## 1.0.0
 
-* TODO: Describe initial release.
+- TODO: Describe initial release.

lib/src/models/date_time_picker_theme.dart

@@ -36,6 +36,7 @@ class DateTimePickerTheme {
       TextStyle(color: Colors.white),
     ),
     this.barTheme = const DateTimePickerBarTheme(),
+    this.monthWeekDayHeaders = false,
   });
 
   /// enum to define a shape dor the date. use [DateBoxShape.circle].
@@ -83,4 +84,7 @@ class DateTimePickerTheme {
 
   /// The shape of the border using a [ShapeBorder]
   final ShapeBorder? shapeBorder;
+
+  /// If true the first letters of the weekdays will be displayed above the days of the month
+  final bool monthWeekDayHeaders;
 }

lib/src/widgets/month_date_time_picker/month_date_time_picker.dart

@@ -9,6 +9,7 @@ import 'package:flutter_date_time_picker/src/extensions/time_of_day.dart';
 import 'package:flutter_date_time_picker/src/models/date_box_current_theme.dart';
 import 'package:flutter_date_time_picker/src/models/date_time_picker_theme.dart';
 import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
+import 'package:intl/intl.dart';
 
 class MonthDateTimePicker extends StatelessWidget {
   const MonthDateTimePicker({
@@ -35,6 +36,29 @@ class MonthDateTimePicker extends StatelessWidget {
       width: MediaQuery.of(context).size.width,
       margin: const EdgeInsets.symmetric(horizontal: 30),
       child: Center(
+        child: Column(
+          children: [
+            if (dateTimePickerController.theme.monthWeekDayHeaders)
+              Row(
+                children: List.generate(
+                  7,
+                  (index) => Expanded(
+                    child: Center(
+                      child: Text(
+                        DateFormat.E(Localizations.localeOf(context).toString())
+                            .format(
+                              date.daysOfWeek().elementAt(index),
+                            )
+                            .toUpperCase()[0],
+                        style:
+                            dateTimePickerController.theme.baseTheme.textStyle,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            SizedBox(
+              height: MediaQuery.of(context).size.height * 0.33,
               child: GridView.count(
                 physics: const NeverScrollableScrollPhysics(),
                 crossAxisSpacing: 5,
@@ -79,15 +103,18 @@ class MonthDateTimePicker extends StatelessWidget {
                                     context, dateTimePickerController);
                               }
 
-                        if (dateTimePickerController.wrongTimeDialog != null) {
+                              if (dateTimePickerController.wrongTimeDialog !=
+                                  null) {
                                 if (timeOfDay != null &&
                                     timeOfDay.containsAny(
-                                dateTimePickerController.disabledTimes ?? [],
+                                      dateTimePickerController.disabledTimes ??
+                                          [],
                                     )) {
                                   showDialog(
                                       context: context,
                                       builder: (context) =>
-                                    dateTimePickerController.wrongTimeDialog!);
+                                          dateTimePickerController
+                                              .wrongTimeDialog!);
                                 }
                               }
 
@@ -99,11 +126,12 @@ class MonthDateTimePicker extends StatelessWidget {
                                 timeOfDay.minute,
                               );
 
-                        dateTimePickerController.onTapDay(selectedDateTime);
+                              dateTimePickerController
+                                  .onTapDay(selectedDateTime);
                             },
                       child: Container(
-                  margin:
-                      const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
+                        margin: const EdgeInsets.symmetric(
+                            vertical: 5, horizontal: 5),
                         decoration: BoxDecoration(
                           color: currentDateBoxTheme.backgroundColor,
                           borderRadius:
@@ -114,7 +142,8 @@ class MonthDateTimePicker extends StatelessWidget {
                         child: Stack(
                           children: [
                             Center(
-                        child: Text((addedIndex + 1 - daysToSkip).toString(),
+                              child: Text(
+                                  (addedIndex + 1 - daysToSkip).toString(),
                                   style: currentDateBoxTheme.textStyle),
                             ),
                             if (shouldMark(
@@ -146,6 +175,9 @@ class MonthDateTimePicker extends StatelessWidget {
                 ),
               ),
             ),
+          ],
+        ),
+      ),
     );
   }
 

lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart

@@ -41,7 +41,10 @@ class MonthDateTimePickerSheet extends StatelessWidget {
         ),
         SizedBox(
           width: MediaQuery.of(context).size.width,
-          height: MediaQuery.of(context).size.height * 0.33,
+          height: MediaQuery.of(context).size.height * 0.33 +
+              ((theme.monthWeekDayHeaders)
+                  ? MediaQuery.of(context).size.height * 0.04
+                  : 0),
           child: PageView(
             controller: dateTimePickerController.pageController,
             onPageChanged: (i) {

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_date_time_picker
 description: A Flutter package for date and time picker.
-version: 2.1.0
+version: 2.2.0
 homepage: https://iconica.nl/
 
 environment: