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.

Migrate from 1.x.x

If your flutter SDK is above flutter SDK 3.27.0, you can safely migrate to v2.x.x. Otherwise you should use v1.x.x to avoid dependency issues.

How to use

Make sure to check out examples for more details.

Installation

Add the following line to pubspec.yaml:

dependencies:
calendar_date_picker2: ^2.0.1

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.

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: context, config, dialogSize:

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

Config options

For CalendarDatePicker2 widget

For CalendarDatePicker2Config:

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

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

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!

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