CalendarDatePicker2

A super 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

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
Built-in showCalendarDatePicker2Dialog

How to use

Make sure to check out examples for more details.

Installation

Add the following line to pubspec.yaml:

dependencies:
  calendar_date_picker2: ^0.3.5

Basic setup

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 a List.

The minimum working sample

CalendarDatePicker2(
  config: CalendarDatePicker2Config(),
  initialValue: [],
);

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,
  ),
  onValueChanged: (dates) => _yourHandler(dates),
  initialValue: [],
);

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,
  ),
  onValueChanged: (dates) => _yourHandler(dates),
  initialValue: [],
);

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),
  initialValue: _dialogCalendarPickerValue,
  borderRadius: BorderRadius.circular(15),
);
...

Config options

For CalendarDatePicker2Config:

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
firstDayOfWeek	int?	Index of the first day of week, where 0 points to Sunday, and 6 points to Saturday.
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)
todayTextStyle	TextStyle?	Custom text style for current calendar day
yearTextStyle	TextStyle?	Custom text style for years list
selectedYearTextStyle	TextStyle?	Custom text style for selected year
dayBorderRadius	BorderRadius?	Custom border radius for day indicator
yearBorderRadius	BorderRadius?	Custom border radius for year indicator
selectableDayPredicate	SelectableDayPredicate?	Function to provide full control over which dates in the calendar can be selected
dayTextStylePredicate	CalendarDayTextStylePredicate?	Function to provide full control over calendar days text style
dayBuilder	CalendarDayBuilder?	Function to provide full control over day widget UI
disableYearPicker	bool?	Flag to disable year picker and hide the toggle icon

In addition to the configurations above, CalendarDatePicker2WithActionButtonsConfig has 8 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

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],
    dayTextStylePredicate: _setWeekendAndAnniversaryTextStyle,
    dayBuilder: _yourDayBuilder,
  ),
  initialValue: [],
  onValueChanged: (dates) => setState(() => _yourVariable = dates),
);

Contributions

Feel free to contribute to this project. 🍺 Pull requests are welcome!

There are some tips before creating a PR:

Please use the official Dart Extension as your formatter or use flutter format . 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

shadyaziza/calendar_date_picker2