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 |
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.
- Extended CalendarDatePicker allows
null
initialDate - Customizable UI
- Supports three modes: single, multi and range
- Built-in
showCalendarDatePicker2Dialog
Make sure to check out examples for more details.
Add the following line to pubspec.yaml
:
dependencies:
calendar_date_picker2: ^0.2.2
The complete example is available here.
CalendarDatePicker2 requires you to provide config
and initialValue
:
config
contains the configurations for your calendar setup and UI.initialValue
is initial values passed into your calendar picker, initial value must be aList
.
CalendarDatePicker2(
config: CalendarDatePicker2Config(),
initialValue: [],
);
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.
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,
),
initialValue: [],
);
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,
),
initialValue: [],
);
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: CalendarDatePicker2Config(),
dialogSize: const Size(325, 400),
initialValue: _dialogCalendarPickerValue,
borderRadius: 15,
);
...
Option | Type | Description |
---|---|---|
calendarType | CalendarDatePicker2Type? | Calendar picker type, has 3 values: single, multi, range |
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 | DatePickerMode? | The initially displayed view of the calendar picker |
weekdayLabels | List<String>? | Custom weekday labels, should starts with Sunday |
weekdayLabelTextStyle | TextStyle? | Custom text style for weekday labels |
controlsHeight | double? | Custom height for calendar control toggle's height |
lastMonthIcon | Widget? | Custom icon for last month button control |
nextMonthIcon | Widget? | Custom icon for next month button control |
controlsTextStyle | TextStyle? | Custom text style for calendar mode toggle control |
dayTextStyle | TextStyle? | Custom text style for calendar day text |
selectedDayTextStyle | TextStyle? | Custom text style for selected calendar day text |
selectedDayHighlightColor | Color? | The highlight color selected day |
disabledDayTextStyle | TextStyle? | Custom text style for disabled calendar day(s) |
In addition to the configurations above, CalendarDatePicker2WithActionButtonsConfig has 7 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 |
shouldCloseDialogAfterCancelTapped | bool? | If the dialog should be closed when user taps the cancel button |
By using the configs above, you could make your own custom calendar picker as your need.
CalendarDatePicker2WithActionButtons(
config: CalendarDatePicker2WithActionButtonsConfig(
calendarType: CalendarDatePicker2Type.range,
selectedDayHighlightColor: Colors.purple[800],
),
initialValue: [],
onValueChanged: (values) => setState(() => _yourVariable = values),
);