Flutter Calendar Picker Example

You are currently viewing Flutter Calendar Picker Example
Flutter Calendar Picker

CalendarDatePicker2

Pub Package
Pub Package
GitHub Repo stars

A lightweight and customizable flutter 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
  • Multi-language supports

How to use

Make sure to check out examples for more details.

Installation of Flutter Calendar Picker

Add the following line to pubspec.yaml:

dependencies: calendar_date_picker2: ^0.5.3

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,
);

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.

See also  Flutter Hello World Application

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,
);

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,
);

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: contextconfigdialogSize :

...
var results = await showCalendarDatePicker2Dialog(
  context: context,
  config: CalendarDatePicker2WithActionButtonsConfig(),
  dialogSize: const Size(325, 400),
  value: _dates,
  borderRadius: BorderRadius.circular(15),
);
...

Config options

For CalendarDatePicker2 widget

ArgumentTypeDescription
configCalendarDatePicker2ConfigCalendar UI related configurations
valueList<DateTime?>The selected [DateTime]s that the picker should display.
onValueChangedValueChanged<List<DateTime?>>?Called when the selected dates changed
displayedMonthDateDateTime?Date to control calendar displayed month
onDisplayedMonthChangedValueChanged<DateTime>?The initially displayed view of the calendar picker

For CalendarDatePicker2Config:

OptionTypeDescription
calendarTypeCalendarDatePicker2Type?Calendar picker type, has 3 values: single, multi, range
firstDateDateTime?The earliest allowable DateTime user can select
lastDateDateTime?The latest allowable DateTime user can select
currentDateDateTime?The DateTime representing today which will be outlined in calendar
calendarViewModeDatePickerMode?The initially displayed view of the calendar picker
weekdayLabelsList<String>?Custom weekday labels, should starts with Sunday
weekdayLabelTextStyleTextStyle?Custom text style for weekday labels
firstDayOfWeekint?Index of the first day of week, where 0 points to Sunday, and 6 points to Saturday.
controlsHeightdouble?Custom height for calendar control toggle’s height
lastMonthIconWidget?Custom icon for last month button control
nextMonthIconWidget?Custom icon for next month button control
controlsTextStyleTextStyle?Custom text style for calendar mode toggle control
dayTextStyleTextStyle?Custom text style for calendar day text
selectedDayTextStyleTextStyle?Custom text style for selected calendar day text
selectedRangeDayTextStyleTextStyle?Custom text style for selected range calendar day(s)
selectedDayHighlightColorColor?The highlight color selected day
selectedRangeHighlightColorColor?The highlight color for day(s) included in the selected range
disabledDayTextStyleTextStyle?Custom text style for disabled calendar day(s)
todayTextStyleTextStyle?Custom text style for current calendar day
yearTextStyleTextStyle?Custom text style for years list
selectedYearTextStyleTextStyle?Custom text style for selected year
dayBorderRadiusBorderRadius?Custom border radius for day indicator
yearBorderRadiusBorderRadius?Custom border radius for year indicator
selectableDayPredicateSelectableDayPredicate?Function to provide full control over which dates in the calendar can be selected
dayTextStylePredicateCalendarDayTextStylePredicate?Function to provide full control over calendar days text style
dayBuilderCalendarDayBuilder?Function to provide full control over day widget UI
yearBuilderCalendarYearBuilder?Function to provide full control over year widget UI
disableModePickerbool?Flag to disable mode picker and hide the toggle icon
centerAlignModePickerbool?Flag to centralize year and month text label in controls
customModePickerIconWidget?Custom icon for the mode picker button icon
modePickerTextHandlerCalendarModePickerTextHandler?Function to control mode picker displayed text
rangeBidirectionalboolFlag to enable selecting dates range also in reverse-chronological order

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

OptionTypeDescription
gapBetweenCalendarAndButtonsdouble?The gap between calendar and action buttons
cancelButtonTextStyleTextStyle?Text style for cancel button
cancelButtonWidget?Custom cancel button
okButtonTextStyleTextStyle?Text style for ok button
okButtonWidget?Custom ok button
openedFromDialogbool?Is the calendar opened from dialog
closeDialogOnCancelTappedbool?Close dialog after user taps the CANCEL button
closeDialogOnOkTappedbool?Close dialog after user taps the OK button
buttonPaddingEdgeInsets?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.

image
image
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,
);

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', ''),
  ],
  ...
);
中文
русский
español
हिंदी

Contributions

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

See also  Cupertino Date Picker in Flutter

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 flutter 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

Learn more about date picker click here

Credit

This project is developed by theideasaler
Download this project from the below link.
https://github.com/theideasaler/calendar_date_picker2/archive/refs/heads/main.zip
You can visit the source page from the below link:
https://github.com/theideasaler/calendar_date_picker2

Spread the love

Leave a Reply