diff --git a/CHANGELOG.md b/CHANGELOG.md index f0e9917..9efeb7c 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/lib/src/models/date_time_picker_theme.dart b/lib/src/models/date_time_picker_theme.dart index a40c3d2..4b5bfeb 100644 --- a/lib/src/models/date_time_picker_theme.dart +++ b/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; } diff --git a/lib/src/widgets/month_date_time_picker/month_date_time_picker.dart b/lib/src/widgets/month_date_time_picker/month_date_time_picker.dart index edc19c1..e3c223e 100644 --- a/lib/src/widgets/month_date_time_picker/month_date_time_picker.dart +++ b/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,115 +36,146 @@ class MonthDateTimePicker extends StatelessWidget { width: MediaQuery.of(context).size.width, margin: const EdgeInsets.symmetric(horizontal: 30), child: Center( - child: GridView.count( - physics: const NeverScrollableScrollPhysics(), - crossAxisSpacing: 5, - crossAxisCount: 7, - children: List.generate( - DateTime(date.year, date.month).daysInMonth() + - (daysToSkip >= 7 ? 0 : daysToSkip), - (index) { - late DateBoxCurrentTheme currentDateBoxTheme; - - int addedIndex = index; - - if (daysToSkip >= 7) { - addedIndex = index + 7; - } - if (addedIndex < daysToSkip) { - return const SizedBox.shrink(); - } - - currentDateBoxTheme = determineCurrentDateBoxTheme(context, - addedIndex, daysToSkip, dateTimePickerController.theme); - - return GestureDetector( - onTap: isDisabled( - addedIndex, - daysToSkip, - ) - ? null - : () async { - TimeOfDay? timeOfDay; - - DateTime selectedDate = DateTime( - date.year, - date.month, - addedIndex + 1 - daysToSkip, - ); - - timeOfDay = const TimeOfDay(hour: 0, minute: 0); - - if (dateTimePickerController.pickTime) { - timeOfDay = await displayTimePicker( - context, dateTimePickerController); - } - - if (dateTimePickerController.wrongTimeDialog != null) { - if (timeOfDay != null && - timeOfDay.containsAny( - dateTimePickerController.disabledTimes ?? [], - )) { - showDialog( - context: context, - builder: (context) => - dateTimePickerController.wrongTimeDialog!); - } - } - - DateTime selectedDateTime = DateTime( - selectedDate.year, - selectedDate.month, - selectedDate.day, - timeOfDay!.hour, - timeOfDay.minute, - ); - - dateTimePickerController.onTapDay(selectedDateTime); - }, - child: Container( - margin: - const EdgeInsets.symmetric(vertical: 5, horizontal: 5), - decoration: BoxDecoration( - color: currentDateBoxTheme.backgroundColor, - borderRadius: - _determineBorderRadius(dateTimePickerController), - ), - height: monthDateBoxSize, - width: monthDateBoxSize, - child: Stack( - children: [ - Center( - child: Text((addedIndex + 1 - daysToSkip).toString(), - style: currentDateBoxTheme.textStyle), + 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, ), - if (shouldMark( - addedIndex, - daysToSkip, - )) ...[ - Align( - alignment: Alignment.bottomRight, - child: IgnorePointer( - child: Container( - width: monthDateBoxSize / 4, - height: monthDateBoxSize / 4, - decoration: BoxDecoration( - color: dateTimePickerController - .theme.markedIndicatorColor ?? - Theme.of(context).indicatorColor, - borderRadius: BorderRadius.circular( - (monthDateBoxSize / 4) * 2), - ), - ), - ), - ), - ], - ], + ), ), ), - ); - }, - ), + ), + SizedBox( + height: MediaQuery.of(context).size.height * 0.33, + child: GridView.count( + physics: const NeverScrollableScrollPhysics(), + crossAxisSpacing: 5, + crossAxisCount: 7, + children: List.generate( + DateTime(date.year, date.month).daysInMonth() + + (daysToSkip >= 7 ? 0 : daysToSkip), + (index) { + late DateBoxCurrentTheme currentDateBoxTheme; + + int addedIndex = index; + + if (daysToSkip >= 7) { + addedIndex = index + 7; + } + if (addedIndex < daysToSkip) { + return const SizedBox.shrink(); + } + + currentDateBoxTheme = determineCurrentDateBoxTheme(context, + addedIndex, daysToSkip, dateTimePickerController.theme); + + return GestureDetector( + onTap: isDisabled( + addedIndex, + daysToSkip, + ) + ? null + : () async { + TimeOfDay? timeOfDay; + + DateTime selectedDate = DateTime( + date.year, + date.month, + addedIndex + 1 - daysToSkip, + ); + + timeOfDay = const TimeOfDay(hour: 0, minute: 0); + + if (dateTimePickerController.pickTime) { + timeOfDay = await displayTimePicker( + context, dateTimePickerController); + } + + if (dateTimePickerController.wrongTimeDialog != + null) { + if (timeOfDay != null && + timeOfDay.containsAny( + dateTimePickerController.disabledTimes ?? + [], + )) { + showDialog( + context: context, + builder: (context) => + dateTimePickerController + .wrongTimeDialog!); + } + } + + DateTime selectedDateTime = DateTime( + selectedDate.year, + selectedDate.month, + selectedDate.day, + timeOfDay!.hour, + timeOfDay.minute, + ); + + dateTimePickerController + .onTapDay(selectedDateTime); + }, + child: Container( + margin: const EdgeInsets.symmetric( + vertical: 5, horizontal: 5), + decoration: BoxDecoration( + color: currentDateBoxTheme.backgroundColor, + borderRadius: + _determineBorderRadius(dateTimePickerController), + ), + height: monthDateBoxSize, + width: monthDateBoxSize, + child: Stack( + children: [ + Center( + child: Text( + (addedIndex + 1 - daysToSkip).toString(), + style: currentDateBoxTheme.textStyle), + ), + if (shouldMark( + addedIndex, + daysToSkip, + )) ...[ + Align( + alignment: Alignment.bottomRight, + child: IgnorePointer( + child: Container( + width: monthDateBoxSize / 4, + height: monthDateBoxSize / 4, + decoration: BoxDecoration( + color: dateTimePickerController + .theme.markedIndicatorColor ?? + Theme.of(context).indicatorColor, + borderRadius: BorderRadius.circular( + (monthDateBoxSize / 4) * 2), + ), + ), + ), + ), + ], + ], + ), + ), + ); + }, + ), + ), + ), + ], ), ), ); diff --git a/lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart b/lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart index 7cffaf9..878c314 100644 --- a/lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart +++ b/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) { diff --git a/pubspec.yaml b/pubspec.yaml index cc46548..c3d6981 100644 --- a/pubspec.yaml +++ b/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: