calendar_date_picker2

Description:

calendar date picker2

CalendarDatePicker2 #



A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.











single mode
multi mode
range mode
dialog function














single scroll
multi scroll
range scroll
dialog scroll



Intro #
CalendarDatePicker2 consists of two main widgets:

CalendarDatePicker2, this widget only includes the calendar UI and will emit event whenever user taps a different date.
CalendarDatePicker2WithActionButtons, this widget includes calendar UI and the action buttons (CANCEL & OK). This widget will only emit the updated value when user taps 'OK' button.

Features #

Extended CalendarDatePicker allows null initialDate
Highly Customizable UI
Supports three modes: single, multi and range
Supports four views: day, month, year and scroll
Built-in showCalendarDatePicker2Dialog
Multi-language supports
Support of Material 3

Migrate from 0.x.x #
Version 1.x.x will by default enable month picker. If you want to migrate to v1.x.x from v0.x.x and would like to keep the old behavior, you will need to set disableMonthPicker to true.
How to use #
Make sure to check out examples for more details.
Installation #
Add the following line to pubspec.yaml:
dependencies:
calendar_date_picker2: ^1.1.7
copied to clipboard
Basic setup #
The complete example is available here.
CalendarDatePicker2 requires you to provide config and value:

config contains the configurations for your calendar setup and UI.
value is initial values passed into your calendar picker, value must be a List.

The minimum working sample #
CalendarDatePicker2(
config: CalendarDatePicker2Config(),
value: _dates,
onValueChanged: (dates) => _dates = dates,
);
copied to clipboard
Single Date Picker Configuration #
During the initialization of CalendarDatePicker2Config the calendarType of the config instance will by default set to CalendarDatePicker2Type.single, so you don't have to set the calendar type specifically.
Multi Date Picker Configuration #
In order to use multi mode date picker, you will need to set the calendarType of config to CalendarDatePicker2Type.multi:
CalendarDatePicker2(
config: CalendarDatePicker2Config(
calendarType: CalendarDatePicker2Type.multi,
),
value: _dates,
onValueChanged: (dates) => _dates = dates,
);
copied to clipboard
Range Date Picker Configuration #
In order to use range mode date picker, you will need to set the calendarType of config to CalendarDatePicker2Type.range:
CalendarDatePicker2(
config: CalendarDatePicker2Config(
calendarType: CalendarDatePicker2Type.range,
),
value: _dates,
onValueChanged: (dates) => _dates = dates,
);
copied to clipboard
Use built-in dialog display method #
This package includes built-in support to display calendar as a dialog. To use it, you will need to call showCalendarDatePicker2Dialog, which takes three required arguments: context, config, dialogSize:
...
var results = await showCalendarDatePicker2Dialog(
context: context,
config: CalendarDatePicker2WithActionButtonsConfig(),
dialogSize: const Size(325, 400),
value: _dates,
borderRadius: BorderRadius.circular(15),
);
...
copied to clipboard
Config options #
For CalendarDatePicker2 widget #



Argument
Type
Description




config
CalendarDatePicker2Config
Calendar UI related configurations


value
List<DateTime?>
The selected [DateTime]s that the picker should display.


onValueChanged
ValueChanged<List<DateTime>>?
Called when the selected dates changed


displayedMonthDate
DateTime?
Date to control calendar displayed month


onDisplayedMonthChanged
ValueChanged<DateTime>?
Called when the user navigates to a new month/year in the picker under non-scroll mode



For CalendarDatePicker2Config: #



Option
Type
Description




calendarType
CalendarDatePicker2Type?
Calendar picker type, has 3 values: single, multi, range


rangeBidirectional
bool?
Flag to enable selecting dates range also in reverse-chronological order


firstDate
DateTime?
The earliest allowable DateTime user can select


lastDate
DateTime?
The latest allowable DateTime user can select


currentDate
DateTime?
The DateTime representing today which will be outlined in calendar


calendarViewMode
CalendarDatePicker2Mode?
The initially displayed view of the calendar picker, with four options available: day, month, year and scroll


calendarViewScrollPhysics
ScrollPhysics?
The scroll physics for the calendar month view


dynamicCalendarRows
bool?
Flag to enable dynamic calendar rows based on specific month


allowSameValueSelection
bool?
Flag to control [onValueChanged] behavior


animateToDisplayedMonthDate
bool?
Flag to always animate to the displayedMonthDate


weekdayLabels
List<String>?
Custom weekday labels, should starts with Sunday


weekdayLabelTextStyle
TextStyle?
Custom text style for weekday labels


weekdayLabelBuilder
WeekdayLabelBuilder?
Function to provide full control over weekday label widget


firstDayOfWeek
int?
Index of the first day of week, where 0 points to Sunday, and 6 points to Saturday.


lastMonthIcon
Widget?
Custom icon for last month button control


nextMonthIcon
Widget?
Custom icon for next month button control


controlsHeight
double?
Custom height for calendar control toggle's height


controlsTextStyle
TextStyle?
Custom text style for calendar mode toggle control


centerAlignModePicker
bool?
Flag to centralize year and month text label in controls


modePickersGap
double?
Custom gap distance between month and year mode pickers


disableModePicker
bool?
Flag to disable mode picker and hide the toggle icon


modePickerTextHandler
ModePickerTextHandler?
Function to control mode picker displayed text


modePickerBuilder
ModePickerBuilder?
Function to provide full control over mode picker UI


customModePickerIcon
Widget?
Custom icon for the mode picker button icon


useAbbrLabelForMonthModePicker
bool?
Use Abbreviation label for month mode picker, only works when month picker is enabled


dayViewController
PageController?
Custom page controller for the calendar day view


dayMaxWidth
double?
Max width of day widget. When [dayMaxWidth] is not null, it will override default size settings


dayBorderRadius
BorderRadius?
Custom border radius for day indicator


dayTextStyle
TextStyle?
Custom text style for calendar day(s)


todayTextStyle
TextStyle?
Custom text style for current calendar day(s)


disabledDayTextStyle
TextStyle?
Custom text style for disabled calendar day(s)


dayTextStylePredicate
DayTextStylePredicate?
Function to provide full control over calendar day(s) text style


selectedDayHighlightColor
Color?
The highlight color selected day


selectedDayTextStyle
TextStyle?
Custom text style for selected calendar day(s)


selectableDayPredicate
SelectableDayPredicate?
Function to provide full control over which dates in the calendar can be selected


selectedRangeDayTextStyle
TextStyle?
Custom text style for selected range calendar day(s)


selectedRangeHighlightColor
Color?
The highlight color for day(s) included in the selected range


selectedRangeDecorationPredicate
SelectedRangeDecorationPredicate?
Predicate to determine the day widget box decoration for a day in selected range


selectedRangeHighlightBuilder
SelectedRangeHighlightBuilder?
Function to provide full control over range picker highlight


daySplashColor
Color?
The splash color of the day widget


dayBuilder
DayBuilder?
Function to provide full control over day widget UI


dayModeScrollDirection
Axis?
Axis scroll direction for [CalendarDatePicker2Mode.day] mode


monthViewController
ScrollController?
Custom scroll controller for the calendar month view


monthBuilder
MonthBuilder?
Function to provide full control over month widget UI


hideMonthPickerDividers
bool?
Flag to hide dividers on month picker


selectableMonthPredicate
SelectableMonthPredicate?
Function to provide full control over which month in the month list can be selected.


disableMonthPicker
bool?
Flag to disable month picker


monthTextStyle
TextStyle?
Custom text style for month(s)


selectedMonthTextStyle
TextStyle?
Custom text style for selected month(s)


disabledMonthTextStyle
TextStyle?
Custom text style for disabled month(s)


yearViewController
ScrollController?
Custom scroll controller for the calendar year view


yearBorderRadius
BorderRadius?
Custom border radius for year indicator


yearTextStyle
TextStyle?
Custom text style for year(s)


selectedYearTextStyle
TextStyle?
Custom text style for selected year(s)


disabledYearTextStyle
TextStyle?
Custom text style for disabled year(s)


selectableYearPredicate
SelectableYearPredicate?
Function to provide full control over which year in the year list be selected.


yearBuilder
YearBuilder?
Function to provide full control over year widget UI


hideYearPickerDividers
bool?
Flag to hide dividers on year picker


scrollViewTopHeaderTextStyle
TextStyle?
Custom text style for scroll view top week labels header


hideScrollViewTopHeader
bool?
Flag to hide top week labels header on scroll view picker


hideScrollViewTopHeaderDivider
bool?
Flag to hide top week labels header divider on scroll view


hideScrollViewMonthWeekHeader
bool?
Flag to hide month calendar week labels header on scroll view


scrollViewConstraints
BoxConstraints?
BoxConstraints for the scroll calendar view, only work for scroll mode


scrollViewMonthYearBuilder
ScrollViewMonthYearBuilder?
Function to provide full control over scroll calendar month year UI


scrollViewOnScrolling
ScrollViewOnScrolling?
Function to callback over scrolling on scroll view


scrollViewController
ScrollController?
Custom scroll controller to the scroll calendar view



In addition to the configurations above, CalendarDatePicker2WithActionButtonsConfig has 9 extra options #



Option
Type
Description




gapBetweenCalendarAndButtons
double?
The gap between calendar and action buttons


cancelButtonTextStyle
TextStyle?
Text style for cancel button


cancelButton
Widget?
Custom cancel button


okButtonTextStyle
TextStyle?
Text style for ok button


okButton
Widget?
Custom ok button


openedFromDialog
bool?
Is the calendar opened from dialog


closeDialogOnCancelTapped
bool?
Close dialog after user taps the CANCEL button


closeDialogOnOkTapped
bool?
Close dialog after user taps the OK button


buttonPadding
EdgeInsets?
Custom wrapping padding for Ok & Cancel buttons



Custom UI #
By using the configs above, you could make your own custom calendar picker as your need.

CalendarDatePicker2WithActionButtons(
config: CalendarDatePicker2WithActionButtonsConfig(
firstDayOfWeek: 1,
calendarType: CalendarDatePicker2Type.range,
selectedDayTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.w700),
selectedDayHighlightColor: Colors.purple[800],
centerAlignModePicker: true,
customModePickerIcon: SizedBox(),
dayBuilder: _yourDayBuilder,
yearBuilder: _yourYearBuilder,
),
value: _dates,
onValueChanged: (dates) => _dates = dates,
);
copied to clipboard
Multi-language support #
This package has multi-language supports. To enable it, add your Locale into the wrapping MaterialApp:
MaterialApp(
localizationsDelegates: GlobalMaterialLocalizations.delegates,
supportedLocales: const [
Locale('en', ''),
Locale('zh', ''),
Locale('ru', ''),
Locale('es', ''),
Locale('hi', ''),
],
...
);
copied to clipboard











中文
русский
español
हिंदी



Contributions #
Feel free to contribute to this project. 🍺 Pull requests are welcome!
There are some tips before creating a PR:

Please always create an issue/feature before raising a PR
Please always create a minimum reproducible example for an issue
Please use the official Dart Extension as your formatter or use dart format . -l 80 if you are not using VS Code
Please keep your changes to its minimum needed scope (avoid introducing unrelated changes)
Please follow this git commit convention by adding feat: or fix: to your PR commit